在React Next.js中获取窗口尺寸时出现Hydration失败错误

问题原因 #

服务端渲染时不存在window对象，你的代码在useState初始化时直接调用getWindowDimensions()，导致服务端生成的初始UI（width/height为null）和客户端初始化时的UI（有实际窗口尺寸）不一致，触发了Hydration错误。

修正方案 #

把初始state设为默认值，在useEffect中完成首次窗口尺寸的获取和监听，确保服务端和客户端初始渲染的UI一致：

const [windowDimensions, setWindowDimensions] = useState({ width: null, height: null });

useEffect(() => {
  function getWindowDimensions() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    return { width, height };
  }

  // 首次获取窗口尺寸
  setWindowDimensions(getWindowDimensions());

  // 监听窗口 resize
  function handleResize() {
    setWindowDimensions(getWindowDimensions());
  }

  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

// 后续使用时处理null值，避免逻辑报错
setWidth(windowDimensions.width ?? 0); // 可根据业务需求设置默认值

关键改动说明 #

• 初始state直接设为{ width: null, height: null }，保证服务端和客户端初始渲染内容一致
• 将getWindowDimensions移到useEffect内部，确保只在客户端环境执行
• 在useEffect中先执行一次尺寸获取，让客户端在Hydration完成后再更新UI
• 用空值合并运算符??处理可能的null值，避免后续代码出现异常

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