Stripe + NextJS 13创建结账会话时priceId未定义致500错误求助

前端传参排查 #

• 检查请求方式与参数传递：
  调用后端/api/payment时，确认是POST请求，且已将priceId放入JSON请求体，同时设置正确的请求头：

  // 前端请求示例
  const createCheckoutSession = async (priceId) => {
    const res = await fetch('/api/payment', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ priceId })
    });
    const data = await res.json();
    // 打印响应，排查后端返回内容
    console.log(data);
  };
  

• 验证触发请求时的参数：
  确认点击按钮等触发逻辑中，传入的priceId是当前price.id，而非其他变量（比如误写为price.idx或未更新的state值）。
• 查看浏览器Network面板：
  找到对应请求，检查Payload/Request Body里是否包含priceId字段，值是否和前端console.log的一致。

后端接收参数排查 #

• 确认参数获取方式匹配NextJS路由类型：
  • App Router（/app/api/payment/route.ts）：需从request.json()解析参数

    export async function POST(request: Request) {
      // 先打印参数，确认是否收到
      const body = await request.json();
      console.log('Received body:', body);
      const { priceId } = body;
    
      if (!priceId) {
        return new Response(JSON.stringify({ error: 'priceId 必填' }), { status: 400 });
      }
    
      // 后续Stripe创建Session逻辑
      const session = await stripe.checkout.sessions.create({
        line_items: [{ price: priceId, quantity: 1 }],
        // 其他配置...
      });
    }
    

  • Pages Router（/pages/api/payment.js）：从req.body获取POST参数

    export default async function handler(req, res) {
      if (req.method !== 'POST') {
        return res.status(405).json({ error: '仅支持POST请求' });
      }
    
      const { priceId } = req.body;
      console.log('Received priceId:', priceId);
    
      if (!priceId) {
        return res.status(400).json({ error: 'priceId 必填' });
      }
    
      // Stripe逻辑...
    }
    

• 避免直接触发Stripe错误：
  必须先校验priceId是否存在，再调用Stripe API——否则未定义的priceId会直接抛出500错误，掩盖真实问题。

额外校验点 #

• 父组件传递给PricingCard的price对象是否完整：确认父组件渲染PricingCard时，传入的price确实包含正确的id字段（比如不要用解构错误导致缺少id）。
• 请求头是否正确：如果前端未设置Content-Type: application/json，后端可能无法解析请求体，导致priceId为undefined。

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