React项目集成Stripe遇TypeScript错误，求助解决方案

错误1：Stripe导入报错（This expression is not callable） #

问题原因 #

Stripe的Node.js库在TypeScript环境下，require("stripe")返回的是包含默认导出的模块对象，而非直接可调用的构造函数，直接调用会提示无调用签名。

解决方案 #

两种修改方式任选其一：

• 调整require语法，获取默认导出

const stripe = require("stripe").default(process.env.STRIPE_KEY);

• 改用ES模块导入（更符合TypeScript规范，同时指定API版本避免Stripe警告）

import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_KEY as string, {
  apiVersion: '2024-06-20'
});

错误2：ctx.request.body不存在（Property 'body' does not exist on type 'Request'） #

问题原因 #

Strapi默认的Request类型未包含body属性定义，TypeScript无法识别解析后的请求体类型。

解决方案 #

三种方式任选其一：

• 类型断言（快速临时解决）

const { products } = ctx.request.body as { products: Array<{ id: number; quantity: number }> };

• 扩展Strapi上下文类型（长期规范方案）
  在src/types/strapi.d.ts中创建类型声明文件：

import { Request } from '@strapi/strapi';

declare module '@strapi/strapi' {
  export interface Request {
    body: Record<string, any>;
  }
}

• 使用泛型指定上下文类型（精准定义请求体结构）

import type { Context } from '@strapi/strapi';

async create(ctx: Context<{
  request: {
    body: { products: Array<{ id: number; quantity: number }> }
  }
}>) {
  const { products } = ctx.request.body;
  // 后续代码...
}

完整修正后的代码示例 #

import Stripe from 'stripe';
import { createCoreController } from '@strapi/strapi/factories';
import type { Context } from '@strapi/strapi';

const stripe = new Stripe(process.env.STRIPE_KEY as string, {
  apiVersion: '2024-06-20'
});

export default createCoreController('api::order.order', ({ strapi }) => ({
  async create(ctx: Context<{
    request: {
      body: { products: Array<{ id: number; quantity: number }> }
    }
  }>) {
    const { products } = ctx.request.body;
    try {
      const lineItems = await Promise.all(
        products.map(async (product) => {
          const item = await strapi
            .service('api::product.product')
            .findOne(product.id);

          return {
            price_data: {
              currency: 'usd',
              product_data: {
                name: item.title,
              },
              unit_amount: Math.round(item.price * 100),
            },
            quantity: product.quantity,
          };
        })
      );

      const session = await stripe.checkout.sessions.create({
        shipping_address_collection: { allowed_countries: ['US', 'CA'] },
        payment_method_types: ['card'],
        mode: 'payment',
        success_url: `${process.env.CLIENT_URL}?success=true`,
        cancel_url: `${process.env.CLIENT_URL}?success=false`,
        line_items: lineItems,
      });

      await strapi
        .service('api::order.order')
        .create({ data: { products, stripeId: session.id } });

      return { stripeSession: session };
    } catch (error) {
      ctx.response.status = 500;
      return { error };
    }
  },
}));

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