NextJS 13客户端组件中window与localStorage未定义问题求助

核心原因 #

尽管标记了'use client'，NextJS 13的客户端组件仍会经历**服务器端预渲染（SSR）**阶段，此时浏览器环境尚未初始化，直接在组件顶层或渲染逻辑中访问window、localStorage这类浏览器API就会触发"window is not defined"错误。

解决方案1：使用useEffect钩子延迟访问 #

useEffect的回调函数只会在客户端渲染完成后执行，此时浏览器API已完全可用，是最稳妥的方式：

'use client';

import { useEffect, useState } from 'react';

export default function DataGrid() {
  const [currentPath, setCurrentPath] = useState('');
  const [storedData, setStoredData] = useState('');

  useEffect(() => {
    // 安全访问window和localStorage
    setCurrentPath(window.location.pathname);
    const saved = localStorage.getItem('your_storage_key');
    if (saved) setStoredData(saved);
  }, []);

  return (
    <div>
      <p>当前路径：{currentPath}</p>
      <p>本地存储数据：{storedData}</p>
    </div>
  );
}

解决方案2：条件渲染结合typeof检查 #

如果只是在JSX中直接使用浏览器API，可以通过typeof window !== 'undefined'做条件判断，避免服务器端执行时报错：

'use client';

export default function DataGrid() {
  return (
    <div>
      {typeof window !== 'undefined' ? (
        <p>当前路径：{window.location.pathname}</p>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
}

注意：这种方式会在客户端初始渲染时先显示"加载中"，之后再更新为实际值，体验略逊于useEffect方案。

解决方案3：动态导入组件并禁用SSR #

如果DataGrid组件或其内部依赖的第三方库在顶层硬编码了浏览器API访问，可以通过NextJS的dynamic导入禁用服务器端渲染，让组件仅在客户端加载：

// page.tsx（客户端组件）
'use client';

import dynamic from 'next/dynamic';

// 禁用SSR，组件仅在客户端渲染
const DataGrid = dynamic(() => import('./DataGrid'), { ssr: false });

export default function Page() {
  return <DataGrid />;
}

为什么你的typeof检查没用？ #

大概率是检查的位置不对：如果在组件顶层变量初始化时做检查（比如const path = typeof window !== 'undefined' ? window.location.pathname : ''），虽然服务器端不会报错，但如果后续在渲染逻辑中直接依赖这个变量，可能会出现值不更新的问题；另外如果是在JSX中直接写window.location.pathname而没包裹条件判断，服务器端渲染时仍会执行这段代码导致报错。

内容的提问来源于stack exchange，提问作者Ismaïl Mourtada