Next.js中getStaticProps未向页面传递数据问题求助

你的代码存在两个关键问题导致posts为undefined：

1. response.json()未加await：response.json()返回的是Promise对象，不等待它解析完成的话，传递给组件的data其实是个未resolved的Promise，而非实际的帖子数据。
2. props键名不匹配：getStaticProps返回的props键是data，但组件里解构的是posts，两者名称不一致，自然拿不到数据。

修复后的代码（两种可选方案） #

方案一：统一props键名为posts

export async function getStaticProps() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/")
  // 必须加await等待JSON解析完成
  const posts = await response.json()

  return {
    props: { posts },
  }
}

export default function Home({ posts }: any) {
  console.log(`posts`, posts) // 现在能正常打印帖子数据了
  return (
    <main className="wrapper wrapper-aligned-center | flow">
      <h1 className="fz-900">Learning NextJS</h1>
    </main>
  )
}

方案二：组件解构时使用data

export async function getStaticProps() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/")
  // 加await解析JSON
  const data = await response.json()

  return {
    props: { data },
  }
}

export default function Home({ data }: any) {
  console.log(`posts`, data) // 打印data即可获取帖子数据
  return (
    <main className="wrapper wrapper-aligned-center | flow">
      <h1 className="fz-900">Learning NextJS</h1>
    </main>
  )
}

关键说明 #

• 调用response.json()时必须添加await，否则无法获取到解析后的JSON数据，拿到的只是一个Promise实例。
• 组件接收props时，解构的变量名必须和getStaticProps返回的props对象中的键名完全一致，否则会因找不到对应属性而返回undefined。

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