Next.js调用API拉取数据时触发products未定义引用错误

代码存在3处问题直接触发引用错误：

• getStaticProps方法中，接口响应解析后赋值给了data变量，但返回props时错误引用了未定义的products变量
• 页面组件ProductList没有接收getStaticProps注入的props，组件作用域内不存在products变量
• 代码中使用了Chakra UI的Text组件，但顶部导入语句未引入该组件，修复前两个问题后会触发新的组件未定义错误；另外列表循环渲染未绑定唯一key属性，会触发React渲染警告。

import { Box, Text } from "@chakra-ui/react";

export async function getStaticProps() {
  const response = await fetch("https://fakestoreapi.com/products");
  const products = await response.json();

  return {
    props: {
      products,
    },
  };
}

function ProductList({ products }) {
  return (
    <Box>
      {products.map((product) => (
        <Box key={product.id}>
          <Text>{product.title}</Text>
        </Box>
      ))}
    </Box>
  );
}

export default ProductList;

注意：getStaticProps仅在Next.js的Pages Router模式下生效，如果你用的是App Router，需要换用服务端组件直接拉取数据的写法，上述修复代码针对Pages Router场景。

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