Next.js中product.map不是函数错误：API数据渲染问题排查

可能的原因及解决方案 #

1. API返回数据结构并非直接数组 #

很多Rest API会把数组数据包裹在对象的某个字段中（比如{ data: [...] }或{ products: [...] }），如果直接将整个响应结果赋值给products，会导致products是对象而非数组，从而触发map不是函数的错误。

解决方法：
先通过console.log(products)确认实际返回的结构，再调整取值逻辑。比如如果接口返回的是{ data: [...] }，就修改getStaticProps：

export const getStaticProps = async () => {
    const res = await fetch('http://localhost:4000/api/products');
    const responseData = await res.json();
    // 根据实际结构取数组
    const products = responseData.data || [];
    
    return {
        props: {
            products
        },
    };
};

2. 变量名冲突（潜在隐患） #

你在模块顶部导入了import data from '../utils/data';，又在getStaticProps里声明了const data = await res.json();，虽然两者作用域不同不会直接报错，但容易造成混淆。建议重命名函数内的变量：

export const getStaticProps = async () => {
    const res = await fetch('http://localhost:4000/api/products');
    const apiData = await res.json();
    
    return {
        props: {
            products: Array.isArray(apiData) ? apiData : []
        },
    };
};

3. 增加兜底判断避免报错 #

在组件渲染时，先判断products是否为数组，再执行map操作，防止因数据异常导致页面崩溃：

export default function Home({ products }) {
    console.log(products);
    
    return (
        <Layout>
            <div>
                <h1>Products</h1>
                <Grid container spacing={3}>
                    {Array.isArray(products) ? (
                        products.map((product) => (
                            <Grid item md={4} key={product.name}>
                                <Card>
                                    <NextLink
                                        href={`/product/${product.slug}`}
                                        passHref
                                    >
                                        <CardActionArea>
                                            <CardMedia
                                                component="img"
                                                image={product.image}
                                                title={product.name}
                                            ></CardMedia>
                                            <CardContent>
                                                <Typography>
                                                    {product.name}
                                                </Typography>
                                            </CardContent>
                                        </CardActionArea>
                                        <CardActions>
                                            <Typography>
                                                ${product.price}
                                            </Typography>
                                            <Button size="medium" color="secondary">
                                                Make a BID{' '}
                                            </Button>
                                        </CardActions>
                                    </NextLink>
                                </Card>
                            </Grid>
                        ))
                    ) : (
                        <Typography>No products available</Typography>
                    )}
                </Grid>
            </div>
        </Layout>
    );
}

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