React组件中getServerSideProps传递的props为undefined，如何正确使用？

核心排查点与解决方案 #

1. 确认组件是否为页面级组件 #

Next.js的getServerSideProps仅在pages目录下的页面组件中生效，如果你的CardFeature是放在components目录下的子组件，这个函数不会被执行，自然无法传递props。

解决方法：

• 将getServerSideProps移至pages目录下的父页面组件中，通过props把books传递给CardFeature子组件。
• 或者直接把CardFeature改造成pages目录下的页面组件（如果它本身就是一个页面）。

2. 检查接口响应结构是否匹配 #

在getServerSideProps中，你通过data.books获取书籍数据，但如果后端接口返回的不是{ books: [...] }这种结构，而是直接返回书籍数组，那data.books就会是undefined，导致传递给组件的books也是undefined。

排查方法：
在getServerSideProps中添加日志，查看接口返回的完整数据：

export async function getServerSideProps() {
  try {
    const response = await fetch("http://localhost:3000/api/books");
    const data = await response.json();
    console.log('接口返回完整数据:', data); // 新增日志
    const books = data.books;
    return {
      props: {
        books,
      },
    };
  } catch (error) {
    console.error('获取书籍失败:', error);
    return {
      props: {
        books: [],
      },
    };
  }
}

查看终端里的Next.js日志，如果data本身就是书籍数组，就把const books = data.books改成const books = data。

3. 验证组件接收的props是否完整 #

有时候可能是组件解构props时的问题，你可以先打印完整的props来排查：

export default function CardFeature(props) {
  console.log('组件接收的props:', props); // 新增日志
  const { books = [] } = props;
  // ... 原有代码
}

如果打印出props是undefined，那说明getServerSideProps根本没执行，回到第一个排查点确认组件位置。如果props存在但books是undefined，那就是接口响应结构的问题。

4. 优化错误处理 #

当前的错误日志只在服务器端打印，你可以在返回的props中携带错误信息，方便在前端调试：

catch (error) {
  console.error('获取书籍数据失败:', error);
  return {
    props: {
      books: [],
      fetchError: error.message
    },
  };
}

然后在组件中可以根据fetchError提示用户或者进一步排查。

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