Next.js客户端解构data对象报错：无法解构undefined的visitorId

问题描述 #

在Next.js客户端代码中，console.log(data)能输出包含visitorId属性的对象，但执行const {visitorId} = data;时却抛出错误：

TypeError: Cannot destructure property 'visitorId' of 'data' as it is undefined.

常见原因 #

1. 异步数据加载时机不匹配：data是异步获取的（比如通过fetch、useSWR等），组件初始渲染时data还未被赋值（处于undefined状态），此时执行解构会报错；而console.log可能在后续数据加载完成后的渲染周期中执行，所以能显示有值的对象。
2. 浏览器console的特性：浏览器的console.log会延迟解析对象的内容，当你在控制台展开对象时，data已经被赋值，导致你误以为执行console.log时data已经有值，但实际执行解构代码时data还是undefined。

解决方法 #

• 解构前做存在性判断
  通过条件判断确保data存在后再解构：

  if (data) {
    const { visitorId } = data;
    console.log(visitorId);
  }
  

  或者使用可选链和默认值简化写法：

  const { visitorId } = data || {};
  // 或者直接提取属性
  const visitorId = data?.visitorId;
  

• 等待数据加载完成后再执行解构
  如果使用数据请求hooks（如useSWR、react-query的useQuery），可以先判断加载状态，等待数据就绪后再处理：

  const { data, isLoading } = useSWR('/api/get-visitor', fetcher);
  
  // 加载中时跳过解构逻辑
  if (isLoading) return <div>加载中...</div>;
  
  const { visitorId } = data;
  console.log(visitorId);
  

• 初始化data为默认空对象
  如果是用useState管理数据，将初始值设为空对象而非undefined，避免初始渲染时解构报错：

  const [data, setData] = useState({});
  

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