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 目錄中。 有了這個修復，一切正常。