Next.js集成Stripe支付时数组数据.map报错的问题排查

第一步：排查请求头与数据发送格式 #

前端发送请求时必须指定Content-Type: application/json头，否则后端无法正确解析JSON格式的购物车数组：

fetch('/api/checkout_sessions', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(basket), // basket为你的购物车数组
})

第二步：确认后端数据接收类型 #

Next.js的API路由会自动解析JSON请求体，直接用req.body获取数据即可，不要手动调用JSON.parse（这会导致"Cannot convert object to primitive value"错误）。在后端打印数据类型验证：

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const data = req.body;
    console.log(typeof data); // 应返回object
    console.log(Array.isArray(data)); // 应返回true，否则说明数据格式错误
  }
}

如果Array.isArray(data)返回false，大概率是前端把数组包裹在了某个对象属性里（比如{ items: basket }），此时后端要取req.body.items而非req.body。

第三步：修复.map调用错误 #

如果数据是类数组对象而非纯数组，用Array.from()转换后再调用map：

const validItemsArray = Array.from(data);
const lineItems = validItemsArray.map(item => ({
  price: item.stripePriceId, // 确保每个商品包含Stripe价格ID
  quantity: item.quantity,
}));

完整后端示例代码 #

import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const basketItems = req.body;
      
      if (!Array.isArray(basketItems)) {
        throw new Error('购物车数据格式错误，需传入数组类型');
      }

      const lineItems = basketItems.map(item => ({
        price: item.stripePriceId,
        quantity: item.quantity,
      }));

      const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        line_items: lineItems,
        mode: 'payment',
        success_url: `${req.headers.origin}/success`,
        cancel_url: `${req.headers.origin}/cancel`,
      });

      res.status(200).json({ sessionId: session.id });
    } catch (err) {
      res.status(err.statusCode || 500).json(err.message);
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

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