[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,7 +28,7 @@ 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.

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

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