diff --git a/packages/next/src/client/components/errors/attach-hydration-error-state.ts b/packages/next/src/client/components/errors/attach-hydration-error-state.ts
index 7c3db1b9a032f..7624ffb8295b0 100644
--- a/packages/next/src/client/components/errors/attach-hydration-error-state.ts
+++ b/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.
@@ -35,7 +36,11 @@ export function attachHydrationErrorState(error: Error) {
 
       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],