Next.js 13.4.19中map函数报错：data?.map is not a function

以下是针对你遇到的问题的排查方向和解决方案：

1. 核对接口返回数据的结构 #

虽然你测试接口时看到的是数组，但组件接收的可能是包裹在对象里的数组。比如接口代码如果是这样：

// GET接口实现
export async function GET() {
  const products = await Product.find();
  // 返回的是包含数组的对象，而非直接数组
  return NextResponse.json({ products: products });
}

那组件里不能直接对整个响应对象调用map，得先解构出数组：

// 组件中获取数据
const res = await fetch('/api/products');
const { products } = await res.json();
// 用products而非整个res.json()返回值去map
products?.map(product => <div key={product._id}>{product.name}</div>)

2. 确保MongoDB查询结果是普通JS数组 #

Mongoose查询默认返回的是Document实例数组，虽然外观像数组，但某些序列化场景下可能被识别为非数组类型。在查询时加上.lean()方法，直接获取普通JS对象数组：

// GET接口中的查询修改
const products = await Product.find().lean();
return NextResponse.json(products);

3. 检查组件数据状态的初始化与处理 #

如果是客户端组件用useState存数据，初始化值必须是数组，避免首次渲染时因初始值不是数组触发错误：

const [products, setProducts] = useState([]); // 初始化为空数组而非null/{}

useEffect(() => {
  const fetchProducts = async () => {
    const res = await fetch('/api/products');
    const data = await res.json();
    // 额外校验，确保存入状态的是数组
    setProducts(Array.isArray(data) ? data : []);
  };
  fetchProducts();
}, []);

4. 调试确认数据类型 #

在组件中添加日志，明确data的实际类型和值：

const res = await fetch('/api/products');
const data = await res.json();
console.log('数据内容:', data, '是否为数组:', Array.isArray(data), '数据类型:', typeof data);

根据日志结果调整：如果是对象，就取对应的数组属性；如果不是数组，回溯接口的数据返回逻辑。

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