next.js - 构建时出错：生成 static 页面（0/5）类型错误：无法读取未定义的属性

Question

使用 next.js 构建项目时，我收到错误Generating static pages (0/5)TypeError: Cannot read properties of undefined (reading 'name') 。

代码：

页：

import User from './components/user';

export default function UserList({ users }) {
  return (
    <>
      <h1>List of Users</h1>
      {users?.map((user) => (
        <User user={user} key={user.id}></User>
      ))}
    </>
  );
}

export async function getStaticProps() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await response.json();

  return {
    props: {
      users: data,
    },
  };
}

零件：

export default function User({ user }) {
  return (
    <>
      <p>{user.name}</p>
      <p>{user.email}</p>
    </>
  );
}

因此，在第一次预渲染站点时，API 似乎还没有加载数据。 通过将其添加到组件来修复错误：

export default function User({ user }) {
  if (user === undefined) {
    return <h1></h1>;
  }
  return (
    <>
      <p>{user.name}</p>
      <p>{user.email}</p>
    </>
  );
}

但现在我需要将此修复添加到我项目中的每个组件中。 此错误是否有其他修复方法？

Answer 1

我发现了问题： components 目录位于 pages 目录中。 有了这个修复，一切正常。