React使用useRef实现滚动时报scrollIntoView为null的错误怎么解决

TypeError: Cannot read property 'scrollIntoView' of null的触发逻辑非常直接：执行scrollIntoView方法的时候，ref.current的值仍然是初始化时的null，没有绑定到真实的DOM节点上，本质是DOM挂载流程和滚动逻辑调用的时序不匹配。
常见的时序错位场景包括：

• 绑定ref的.commentdiv本身是依赖异步数据、条件判断渲染的，当useEffect回调触发时，该DOM根本没有完成渲染，自然不会把DOM实例赋值给ref
• 没有做空值防御，只要遇到上述DOM未挂载的场景，就会直接抛出空值访问错误

• 首先确认绑定ref的DOM是否存在渲染延迟：如果该div的渲染依赖异步接口数据（比如评论列表），需要把对应的数据状态加入useEffect的依赖数组，等数据返回、DOM完成渲染后再触发滚动逻辑，示例写法：

useEffect(() => {
  // 仅当DOM存在时才执行滚动
  if (ref.current) {
    ref.current.scrollIntoView({ block: 'end', behavior: 'smooth' })
  }
}, [commentList]) // 把评论列表状态作为依赖，匹配DOM渲染时机

• 在滚动逻辑中增加空值防御，彻底避免null访问报错：

const executeScroll = () => {
  // ref未绑定DOM时直接跳过执行
  if (!ref.current) return
  ref.current.scrollIntoView({ block: 'end', behavior: 'smooth' })
}

• 若确认DOM一定会正常挂载、仍偶现null报错，可将滚动逻辑延后到浏览器完成当前渲染帧后执行，保证ref的赋值流程走完再调用方法：

useEffect(() => {
  // 宏任务延后执行，等DOM挂载、ref赋值完成
  const timer = setTimeout(() => {
    executeScroll()
  }, 0)
  // 组件卸载时清理定时器，避免无效执行
  return () => clearTimeout(timer)
}, [])

额外避坑提示：如果后续将该div抽为自定义函数组件，不能直接在组件上绑定ref，需要通过forwardRef将ref透传到组件内部的原生DOM节点上，否则ref会始终保持null。

内容的提问来源于stack exchange，提问作者Shahariar Rahman Sajib