Next.js报_document.js中originalRenderPage未定义错误求助

报错栈定位到_document.js中originalRenderPage调用行是表象，核心触发原因有两个：

1. 自定义_document.js存在冗余导入，且Material UI服务端样式收集逻辑未处理第三方组件的ref透传，引入带原生ref属性的轮播组件时，ServerStyleSheets.collect遍历组件树会读取到undefined的ref节点抛出错误
2. 引入的轮播组件本身未做服务端渲染适配，直接在SSR阶段执行会触发客户端专属的DOM/ref API调用报错

按以下顺序调整即可解决：

• 清理_document.js的重复导入，当前代码中两次从next/document导出模块，先把导入部分修正为：

import React from 'react'
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheets } from '@material-ui/styles'

• 修正getInitialProps中的样式收集逻辑，避免ref透传异常，替换原有_Document.getInitialProps块的代码为：

_Document.getInitialProps = async ctx => {
  const sheets = new ServerStyleSheets()
  const originalRenderPage = ctx.renderPage

  ctx.renderPage = () => originalRenderPage({
    enhanceApp: (App) => props => sheets.collect(<App {...props} />)
  })

  const initialProps = await Document.getInitialProps(ctx)

  return {
    ...initialProps,
    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()]
  }
}

• 对轮播组件做客户端动态加载，跳过SSR阶段渲染，彻底规避服务端ref/DOM API调用问题，引入组件时使用Next.js动态导入语法：

import dynamic from 'next/dynamic'
// 关闭ssr加载轮播组件
const Carousel = dynamic(() => import('你的轮播组件引入路径'), { ssr: false })

补充说明：如果使用的是Next.js 13+版本的App Router模式，pages目录下的_document.js不会生效，需要将Material UI的样式收集逻辑迁移到App Router对应的根布局配置中，否则引入任意客户端组件都可能触发同类报错。

内容的提问来源于stack exchange，提问作者Günay Yağcı