Next.js中getStaticProps传Props给组件后console.log输出undefined的问题

你的代码里有两个关键问题导致data返回undefined：

1. 错误手动调用getStaticProps() #

Next.js 的getStaticProps是框架自动触发的特殊函数，仅在构建阶段（或增量静态再生时）运行，完全不需要你手动调用。你代码最后一行的getStaticProps()会：

• 提前执行这个异步函数，但组件渲染时不会等待它的返回结果
• 破坏 Next.js 原生的 props 传递机制，导致框架无法正确将getStaticProps的返回值注入组件

直接删除这行代码即可。

2. 需确认API返回的数据结构 #

你通过res.data.books取值，如果/api/books接口返回的 JSON 数据里不存在books字段，data自然会是undefined。可以先在getStaticProps中打印接口返回内容，确认数据结构：

export const getStaticProps = async () => {
  const res = await axios.get("http://localhost:3000/api/books");
  console.log('API实际返回:', res.data); // 查看接口返回完整结构
  const data = res.data.books;
  return { props: { data } };
}

修正后的完整代码 #

import axios from "axios"

function HomePage ({data})  {
  console.log(data)
  return (
      <div>Home</div>
  )
}

export default HomePage

export const getStaticProps = async () => {
  const res = await axios.get("http://localhost:3000/api/books");
  const data = res.data.books || []; // 加默认值避免undefined
  return {
    props: { data }
  }
}

额外注意：res.data是接口返回的同步 JSON 数据，不需要再加await，你原代码里的await res.data.books是多余的。

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