Next.js getStaticProps/getServerSideProps页面源码渲染异常

• 核心错误出在动态路由页面的组件返回逻辑：React 组件直接返回多个平级根元素时，Next.js 服务端渲染流程无法将内容正确拼接进 _document 定义的 HTML 骨架中，直接导致输出的原始 HTML 结构残缺；客户端水合阶段 React 会自动容错修正 DOM 结构，因此开发者工具检查元素时内容显示完全正常。
• 违规使用 _document 专属内置组件：<Main /> 是 next/document 提供的专用组件，仅允许在自定义 _document.js 文件中使用，普通业务页面引入渲染该组件会直接打断 SSR 的 HTML 生成链路。
• 逻辑隐患：getStaticProps 分支中，当 Firestore 文档不存在时没有返回兜底结果（notFound: true 或默认 props），会触发对应路径的渲染异常。

1. 重构动态页面的返回结构，使用单个根节点包裹所有页面内容，移除业务页面中错误引入的 <Main /> 组件，替换为自定义的页面主体容器：

// 注意：普通业务页面不要从 next/document 导入 Main 组件
import Head from 'next/head'

function Action({actionData, actionId, params}) {
  // 原有业务逻辑、函数保持不变

  return (
    // 使用 React Fragment 或实际业务容器作为单一根节点，包裹所有页面元素
    <>
      <Head>
        {/* 配置当前页面专属的 title、meta 标签 */}
        <title>{actionData.title}</title>
        <meta name="description" content={actionData.description} />
      </Head>
      <main>
        {/* 放置页面 h1、p、内容区块等主体元素 */}
      </main>
      <Footer />
    </>
  )
}

2. 补全 getStaticProps 的异常分支逻辑，避免文档不存在时返回空值导致渲染错误：

export async function getStaticProps({ params }) {
  const docRef = doc(db, "actions", params.id);
  const docSnap = await getDoc(docRef);
  if (docSnap.exists()) {
    return {
      props: { 
        actionData: JSON.parse(JSON.stringify(docSnap.data())),
        actionId: params.id,
        params
      } 
    }
  } else {
    // 文档不存在时返回404状态，避免渲染空页面
    return {
      notFound: true
    }
  }
}

3. 修复完成后重新执行构建启动命令 next build && next start，访问对应页面查看原始源码，即可看到完整的 <html> 根节点、meta 元标签、主体内容，SEO 抓取逻辑会恢复正常。

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