Next.js使用SWR获取JSON记录无法渲染，报TypeError错误求助

问题描述 #

使用SWR获取JSON数据时，控制台能打印完整的data结构，但页面渲染时抛出错误：

TypeError: Cannot read properties of undefined (reading 'name')

使用的组件代码：

import useSWR from "swr";
const fetcher = (url) => fetch(url).then((res) => res.json());

export default function Index() {
  const { data, error } = useSWR("/api/staticdata", fetcher);

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;
  console.log("data is: " + data);
  return (
    <div>
      <h1>My Framework from file</h1>
      <ul>
        <li>Name: {data.record.name}</li>
        <li>Language: {data.record.language}</li>
      </ul>
    </div>
  );
}

控制台打印的data结构：

{
    "record": {
        "id": 8221,
        "uid": "a15c1f1d-9e4e-4dc7-9c45-c04412fc5064",
        "name": "Next.js",
        "language": "JavaScript"
    }
}

问题原因 #

1. 中间状态的空对象：SWR可能在某些场景下返回空对象{}而非undefined，此时data.record为undefined，直接访问name会触发错误。
2. console.log的误导：代码中使用"data is: " + data的字符串拼接，会将对象转为[object Object]，你手动贴出的格式化结构是异步更新后的最终数据，但渲染时可能处于未完全加载的中间状态。

解决方案 #

方案1：增加record存在性检查 #

在渲染前同时判断data和data.record是否存在：

import useSWR from "swr";
const fetcher = (url) => fetch(url).then((res) => res.json());

export default function Index() {
  const { data, error } = useSWR("/api/staticdata", fetcher);

  if (error) return <div>Failed to load</div>;
  if (!data || !data.record) return <div>Loading...</div>;
  // 修正打印方式，查看真实的data结构
  console.log("data is:", data);
  return (
    <div>
      <h1>My Framework from file</h1>
      <ul>
        <li>Name: {data.record.name}</li>
        <li>Language: {data.record.language}</li>
      </ul>
    </div>
  );
}

方案2：使用可选链操作符 #

通过可选链?.避免访问undefined属性，简化错误处理：

<li>Name: {data.record?.name}</li>
<li>Language: {data.record?.language}</li>

方案3：检查API路由的正确性 #

确认/api/staticdata路由文件是否正确返回包含record字段的JSON，示例正确的API代码：

// /pages/api/staticdata.js
export default function handler(req, res) {
  res.status(200).json({
    record: {
      id: 8221,
      uid: "a15c1f1d-9e4e-4dc7-9c45-c04412fc5064",
      name: "Next.js",
      language: "JavaScript"
    }
  });
}

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