Next.js中调用document滚动到表单报错元素报未定义错误如何解决

方案1：标记为客户端组件（Next.js App Router 最优解） #

在你存放onClick逻辑的组件文件最顶部添加'use client'指令，Next.js会直接将该组件标记为客户端组件，所有内部代码都仅在浏览器侧运行，服务端渲染阶段不会执行，自然不会出现document未定义的报错。
示例代码：

// 必须放在文件第一行
'use client'

// 你的其他组件逻辑
function onClick(){
  // 先加边界判断，避免无报错或找不到输入框时抛出异常
  if (!Object.keys(errors).length) return
  const errorInputName = Object.keys(errors)[0];
  document.getElementsByName(errorInputName)?.[0]?.scrollIntoView({ behavior: "smooth" });
}

方案2：通过useEffect执行滚动逻辑 #

React的useEffect钩子的回调函数永久仅在客户端执行，你可以通过状态驱动的方式让滚动逻辑仅在客户端运行：

'use client'
import { useState, useEffect } from 'react'

// 组件内部逻辑
const [scrollTarget, setScrollTarget] = useState('')

useEffect(() => {
  if (!scrollTarget) return
  document.getElementsByName(scrollTarget)?.[0]?.scrollIntoView({ behavior: "smooth" })
  setScrollTarget('')
}, [scrollTarget])

function onClick(){
  if (!Object.keys(errors).length) return
  setScrollTarget(Object.keys(errors)[0])
}

方案3：延迟执行逻辑 #

如果不想改动组件层级，也可以用setTimeout包裹滚动代码，哪怕设置0ms延迟，也会将这段逻辑推到客户端事件队列中执行，完全避开服务端渲染阶段：

function onClick(){
  setTimeout(() => {
    if (!Object.keys(errors).length) return
    const errorInputName = Object.keys(errors)[0];
    document.getElementsByName(errorInputName)?.[0]?.scrollIntoView({ behavior: "smooth" });
  }, 0)
}

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