[dev-overlay] Harden types when handling hydration mismatches

Author: eps1lon

packages/next/src/client/components/errors/attach-hydration-error-state.ts

@@ -6,6 +6,7 @@ import {
 import {
   hydrationErrorState,
   getReactHydrationDiffSegments,
+  type HydrationErrorState,
 } from './hydration-error-info'
 
 export function attachHydrationErrorState(error: Error) {
@@ -27,15 +28,19 @@ export function attachHydrationErrorState(error: Error) {
   if (reactHydrationDiffSegments) {
     const diff = reactHydrationDiffSegments[1]
     parsedHydrationErrorState = {
-      ...(error as any).details,
+      ...((error as any).details as HydrationErrorState),
       ...hydrationErrorState,
       // If diff is present in error, we don't need to pick up the console logged warning.
       // - if hydration error has diff, and is not hydration diff log, then it's a normal hydration error.
       // - if hydration error no diff, then leverage the one from the hydration diff log.
 
       warning: (diff && !isHydrationWarning
         ? null
-        : hydrationErrorState.warning) || [getDefaultHydrationErrorMessage()],
+        : hydrationErrorState.warning) || [
+        getDefaultHydrationErrorMessage(),
+        '',
+        '',
+      ],
       // When it's hydration diff log, do not show notes section.
       // This condition is only for the 1st squashed error.
       notes: isHydrationWarning ? '' : reactHydrationDiffSegments[0],

packages/next/src/client/components/errors/hydration-error-info.ts

@@ -4,7 +4,7 @@ import {
 } from '../is-hydration-error'
 
 export type HydrationErrorState = {
-  // Hydration warning template format: <message> <serverContent> <clientContent>
+  // Hydration warning template format: <message> <serverContent> <clientContent> | <default message>
   warning?: [string, string, string]
   serverContent?: string
   clientContent?: string