Next.js中如何将getServerSideProps获取的异步数据传递给组件？

为什么会报错？ #

getServerSideProps是Next.js专为页面级组件（比如你的Homepage）设计的数据获取方法，它只会把获取到的数据注入当前页面组件的props里，不会自动传递给子组件。你在ListComponent里尝试接收data却提示未定义，就是因为没从父组件Homepage显式把数据传过去。

解决步骤 #

核心就是组件间的Props传递，和普通React组件传值逻辑一致：

1. 在Homepage中传递数据给ListComponent
   导入ListComponent后，在渲染时把data作为props传给它：

   // Homepage.jsx
   import ListComponent from './ListComponent';
   
   export default function Homepage({ data }) {
     return (
       <div>
         {/* 把data作为props传给子组件 */}
         <ListComponent data={data} />
       </div>
     );
   }
   
   export async function getServerSideProps() {
     // 你的数据读取逻辑（示例）
     const fs = require('fs/promises');
     const path = require('path');
     const filePath = path.join(process.cwd(), 'data.json');
     const jsonData = await fs.readFile(filePath, 'utf8');
     const data = JSON.parse(jsonData);
   
     return { props: { data } };
   }
   

2. 在ListComponent中接收并使用数据
   直接通过props接收data，然后执行你的映射函数2即可：

   // ListComponent.jsx
   export default function ListComponent({ data }) {
     // 这里可以用data执行映射逻辑
     return (
       <div>
         {data.map(item => (
           <div key={item.id}>{item.title}</div>
         ))}
       </div>
     );
   }
   

关键总结 #

Next.js的页面数据获取方法（getServerSideProps/getStaticProps等）只负责给页面组件提供数据，子组件需要的数据必须通过页面组件手动传递，这和React的组件传值逻辑完全一致，没有特殊的“自动注入”机制。

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