Next.js中getStaticProps传数据给组件报水合失败错误如何解决

你从getStaticProps取数据传给子组件的实现逻辑完全正确，这是Next.js的标准用法，不需要调整传参相关的代码。你碰到的水合报错和传参逻辑没有关系。

报错Hydration failed because the initial UI does not match what was rendered on the server的核心原因是：服务端渲染生成的DOM结构，和客户端首次加载时React生成的DOM结构不一致。结合你的代码场景，优先排查以下几个问题：

• 列表遍历逻辑问题
  你调用map渲染菜单时，要么没给列表项设置唯一稳定的key（不要用数组下标当key，用菜单项唯一的id字段），要么没有做数据兜底：如果接口偶发返回main_menu为undefined/null，服务端渲染时不会渲染列表，客户端拿到数据后渲染出列表，就会出现结构差。
  修复方式就是在遍历前做类型兜底，保证服务端和客户端首次渲染时的初始值一致：

  export default function Header({ data }) {
    // 初始值固定为数组，避免data.main_menu不存在时调用map报错，也保证两端初始结构一致
    const menuList = data?.main_menu ?? []
    return (
      <nav>
        {menuList.map(item => (
          <a key={item.id} href={item.path}>{item.name}</a>
        ))}
      </nav>
    )
  }
  

• HTML结构不合法
  浏览器会自动修正不符合规范的DOM结构，如果你写了嵌套错误的标签，会导致服务端输出的结构和浏览器修正后的结构不一致，触发水合错误。常见错误包括：
  • 块级元素（div/p/nav等）嵌套在<p>标签内部
  • <a>标签内部嵌套另一个<a>标签
  • 表格类标签缺少必要的子元素（比如<tr>外面没包<tbody>）
    你可以检查下<Header />组件被放置的位置，以及组件内部返回的标签结构是否符合HTML规范。
• 首次渲染阶段调用了浏览器专属API
  如果你在组件首次渲染时（不是useEffect里）直接调用window/document等浏览器端才有的API生成内容，服务端渲染时拿不到对应值，会导致两端渲染结果不一致。这类逻辑要放到useEffect里执行，或者加客户端判断。

如果上面的问题都排除了，可以试试用排除法定位：先把Header里的map代码全部注释掉，只返回一个固定的div，看报错是否消失，再逐行放开代码，很快就能定位到触发问题的具体节点。另外本地开发时如果开了会修改DOM的浏览器扩展（比如翻译插件、广告拦截插件），也可能偶发触发水合报错，可以用无痕模式打开页面验证。

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