Next.js中Material UI Tabs内嵌div触发Hydration失败问题求助

问题根源 #

你遇到的Hydration失败错误，核心原因是Next.js服务端渲染（SSR）生成的HTML与客户端hydration时生成的DOM结构/样式不匹配。结合你的代码场景，具体诱因包括：

• TabPanel的条件渲染逻辑：服务端仅渲染初始激活的Tab内容（index=0），但客户端hydration时可能因状态或样式加载顺序问题，导致DOM结构差异
• styled-components的SSR配置缺失：服务端未正确注入样式，导致客户端加载时样式突变，引发DOM布局偏移
• 无效文本节点：代码中GropuArmorAndPenalty组件内的单独文本Space，可能造成服务端与客户端文本节点处理不一致

具体修复步骤 #

1. 调整TabPanel渲染逻辑，统一DOM结构 #

将TabPanel中通过{value === index && (...)}的条件渲染改为CSS控制显示隐藏，确保服务端和客户端渲染所有TabPanel的DOM结构，仅通过样式控制可见性：

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      style={{ display: value === index ? 'block' : 'none' }}
      {...other}
    >
      <Box sx={{ p: 0 }}>
        {children} {/* 移除Typography包裹，避免额外标签引发的结构差异 */}
      </Box>
    </div>
  );
}

2. 配置styled-components的SSR支持 #

在Next.js中使用styled-components必须确保服务端正确注入样式，否则会触发hydration错误：

• 安装依赖：

npm install babel-plugin-styled-components --save-dev

• 在项目根目录创建.babelrc文件：

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

• 若使用Next.js 13+ App Router，需在layout.js中添加样式注册表：

'use client';
import { useState } from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';

function StyledComponentsRegistry({ children }) {
  const [sheet] = useState(() => new ServerStyleSheet());

  useServerInsertedHTML(() => {
    const styles = sheet.getStyleElement();
    sheet.instance.clearTag();
    return <>{styles}</>;
  });

  if (typeof window !== 'undefined') return <>{children}</>;

  return (
    <StyleSheetManager sheet={sheet.instance}>
      {children}
    </StyleSheetManager>
  );
}

export default function RootLayout({ children }) {
  return (
    <html lang="pt-BR">
      <body>
        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
      </body>
    </html>
  );
}

3. 移除无效文本节点 #

将代码中GropuArmorAndPenalty组件内的Space文本替换为占位组件，避免文本节点导致的差异：

// 替换原有的"Space"
<Box sx={{ width: '20px' }} />

内容的提问来源于stack exchange，提问作者Lucas Wyllame