Next.js中访问API获取的对象属性报错：TypeError: Cannot read property 'id' of undefined

问题根源 #

你遇到的TypeError: Cannot read property 'id' of undefined本质是数据加载的异步性导致的：自定义Hook调用API是异步操作，在组件初始渲染（尤其是Next.js的服务端渲染阶段）时，avengers还是初始的空数组，此时avengers[0]为undefined，直接访问.id就会抛出错误。

可行解决方案 #

1. 使用可选链操作符（推荐） #

通过?.语法安全访问嵌套属性，当avengers[0]不存在时，表达式会直接返回undefined而不报错：

const avengers = useFilteredData("Adventure");
// 安全访问id
const avengerId = avengers[0]?.id;

2. 条件渲染判断 #

先检查数组长度，确保存在元素后再访问属性：

const avengers = useFilteredData("Adventure");

return (
  <div>
    {avengers.length > 0 ? (
      <p>ID: {avengers[0].id}</p>
    ) : (
      <p>加载中...</p>
    )}
  </div>
);

3. 在自定义Hook中添加加载状态 #

修改你的自定义Hook，返回数据的同时返回加载状态，组件根据状态控制渲染逻辑：

// 自定义Hook示例
function useFilteredData(filterName) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch("/api/your-endpoint");
      const result = await res.json();
      const filtered = result.filter(item => item.name === filterName);
      setData(filtered);
      setLoading(false);
    };
    fetchData();
  }, [filterName]);

  return { data, loading };
}

// 组件中使用
const { data: avengers, loading } = useFilteredData("Adventure");

return (
  <div>
    {loading ? (
      <p>加载中...</p>
    ) : (
      <p>ID: {avengers[0]?.id}</p>
    )}
  </div>
);

4. 空值合并运算符处理默认值 #

如果需要在属性不存在时显示默认值，可以结合可选链和空值合并：

const avengerId = avengers[0]?.id ?? "暂无数据";

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