NextJS报错TypeError: productList.map is not a function求助

问题根源 #

TypeError: productList.map is not a function 直接说明你尝试在非数组类型的数据上调用数组方法map。导致这个问题的常见原因：

• 接口http://localhost:3000/api/products返回的不是直接的数组，而是嵌套在对象中的数组（比如{ products: [...] }或{ data: [...] }）
• 接口请求失败，返回了错误对象、null或其他非数组数据
• 数据传递过程中被意外修改为非数组类型

解决步骤 #

1. 确认接口返回的数据结构 #

在getServerSideProps中打印接口返回的完整数据，明确res.data的结构：

export const getServerSideProps = async () => {
    const res = await axios.get("http://localhost:3000/api/products");
    console.log('接口返回数据:', res.data); // 在终端查看输出
    return {
        props: {
            productList: res.data
        }
    }
};

如果终端输出显示res.data是包含数组的对象（比如{ products: [...] }），则调整取值逻辑：

// 示例：假设接口返回{ products: [...] }，取对应数组字段
productList: res.data.products

2. 给productList设置默认空数组 #

在ProductList组件中给参数设置默认值，确保即使productList为undefined或非数组，也能安全调用map：

const ProductList = ({ productList = [] }) => { // 默认空数组
  return (
    <div className={styles.container}>
        <h1 className={styles.title}>THE BEST PIZZA IN TOWN</h1>
        <p className={styles.desc}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, nemo at, labore porro reiciendis rem ad tempora blanditiis adipisci a eum animi obcaecati, dignissimos non perspiciatis natus corrupti consectetur libero.</p>
        <div className={styles.wrapper}>
          {productList.map(product => (
             <ProductCard key={product._id} product={product} />
          ))}
        </div>
    </div>
  );
};

3. 渲染前判断数据类型（可选） #

如果需要更严谨的逻辑，在渲染map前先确认productList是数组：

<div className={styles.wrapper}>
  {Array.isArray(productList) ? 
    productList.map(product => (
      <ProductCard key={product._id} product={product} />
    )) : 
    <p>暂无产品数据</p>
  }
</div>

4. 处理接口请求异常 #

给getServerSideProps添加异常捕获，避免请求失败时传递错误数据：

export const getServerSideProps = async () => {
    try {
        const res = await axios.get("http://localhost:3000/api/products");
        // 确保返回的是数组，否则转为空数组
        const productList = Array.isArray(res.data) ? res.data : [];
        return {
            props: {
                productList
            }
        }
    } catch (error) {
        console.error('获取产品数据失败:', error);
        return {
            props: {
                productList: [] // 请求失败时返回空数组
            }
        }
    }
};

内容的提问来源于stack exchange，提问作者Ogi Bin Edi