Next.js中getServerSideProps传参至组件时props为undefined问题

以下是针对你遇到的子组件props接收为undefined问题的常见排查点和修复方式：

1. 确认父组件props传递是否正确 #

检查pages/index.js中渲染Expertises组件时，是否明确传递了从getServerSideProps获取的数据。很多时候是漏传或者键名拼写错误导致的。

错误示例：

// pages/index.js
export default function Home({ expertiseData }) {
  console.log(expertiseData); // 正常打印数据
  return <Expertises />; // 未传递任何props
}

正确示例：

// pages/index.js
export default function Home({ expertiseData }) {
  console.log(expertiseData);
  return <Expertises expertiseData={expertiseData} />; // 明确传递props
}

2. 检查子组件props接收逻辑 #

确保container/Expertise/Expertises.jsx中正确接收props，注意键名要和父组件传递的完全一致，同时函数组件要正确定义props参数。

错误示例1：键名不匹配

// Expertises.jsx
export default function Expertises({ data }) {
  console.log(data); // undefined，因为父组件传的是expertiseData
  return <div>...</div>;
}

错误示例2：未定义props参数

// Expertises.jsx
export default function Expertises() {
  console.log(props); // props未定义，导致undefined
  return <div>...</div>;
}

正确示例：

// Expertises.jsx
export default function Expertises({ expertiseData }) {
  console.log(expertiseData); // 正常打印数据
  return <div>...</div>;
}

3. 验证getServerSideProps的返回格式 #

确认pages/index.js中的getServerSideProps是否正确将数据放入返回的props对象中，这是数据能传递到页面组件的关键。

错误示例：

// pages/index.js
export async function getServerSideProps() {
  const expertiseData = await fetch('/api/expertise'); // 从utils/api.js调用
  return {
    props: {} // 未将expertiseData加入props
  };
}

正确示例：

// pages/index.js
export async function getServerSideProps() {
  const expertiseData = await fetchExpertiseData(); // 假设utils/api.js中的方法
  return {
    props: { expertiseData } // 将数据传入页面组件的props
  };
}

4. 检查API返回的数据结构 #

虽然index.js中打印数据正常，但如果API返回的是嵌套结构（比如{ data: [...] }），子组件可能需要对应层级的取值。比如父组件拿到的是{ data: [...] }，子组件需要接收后取props.expertiseData.data才能拿到实际列表。

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