在Next.js中使用getServerSideProps从Strapi取数据返回undefined，求排查

你的代码存在两个关键问题，导致获取的数据始终为undefined：

1. 组件接收Props的方式错误 #

你在组件参数里写的是{props}，但getServerSideProps返回的是{ props: { data } }——这意味着传递给组件的Props对象里直接包含data字段，而非嵌套在props中。组件应该直接解构data，而非外层的props。

修正后的组件代码：

function Products({data}) {
  console.log(data); // 现在能正确拿到数据

  return (
    <div className=''>
      <div>
      </div>
    </div>
  );
}

2. 未处理HTTP请求异常 #

虽然浏览器能正常访问链接，但服务器端的fetch请求可能因HTTP状态码异常（如401权限验证失败、404资源不存在等）导致res.json()返回undefined。必须先检查响应状态是否正常。

修正后的getServerSideProps：

export async function getServerSideProps() {
  const res = await fetch(`http://localhost:1337/api/products?populate=*`);
  
  // 先验证请求是否成功
  if (!res.ok) {
    console.error(`请求失败，状态码：${res.status}`);
    // 可根据需求返回空数据或抛出错误
    return { props: { data: [] } };
  }
  
  const data = await res.json();
  console.log(data); // 现在能正确打印数据
  
  return { props: { data } };
}

额外补充：如果你的Strapi开启了权限验证，服务器端请求可能需要携带认证头（如Bearer Token）。浏览器能访问可能是因为前端存储了认证信息，但服务器端请求未携带，导致返回空数据或被拒绝。可以查看Strapi控制台日志确认请求状态。

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