如何向tanstack react-query的mutateAsync传递变量？

问题根源 #

你遇到的类型错误是因为useMutation的泛型参数未正确指定变量类型，导致TypeScript推断mutateAsync的参数为void，无法接收你传入的对象。另外代码里还有一处拼写不一致的问题，需要一并修正。

具体修复步骤 #

1. 定义明确的变量类型（替代any） #

先给mutation需要的参数定义一个TypeScript接口，让类型检查更严格：

interface CreateSaleParams {
  customerId: string | number; // 根据实际业务类型调整
  saleDetail: any[]; // 建议替换成具体的明细数据类型
}

2. 修正useMutation的泛型参数 #

在useSaleData.create()的useMutation中，补充变量类型的泛型参数（useMutation的泛型顺序为：成功数据类型、错误类型、变量类型）：

export const useSaleData = {
  listAll: () => {
    return useQuery<any, any>({
      queryKey: ['fetchAllSales'],
      queryFn: saleServices.fetchAll,
    });
  },
  create: () => {
    // 补充泛型参数：<成功数据类型, 错误类型, 变量类型>
    return useMutation<any, any, CreateSaleParams>({
      mutationKey: ['createSale'],
      mutationFn: async ({ customerId, saleDetail }) => {
        return await saleServices.create({
          customerId,
          saleDetail,
        });
      },
    });
  },
};

3. 修正组件中参数的拼写错误 #

你的组件代码里传的是salesDetail，但mutationFn里接收的是saleDetail（少了一个s），这会导致接口调用时参数缺失，需要统一：

const onCreateSale = async () => {
   const sale = await mutateSale({
      customerId: customer.id,
      saleDetail: orderList, // 把salesDetail改成saleDetail
    });
 };   

修复逻辑说明 #

• React Query的useMutation必须明确指定变量类型泛型，否则TypeScript会默认推断参数为void，导致传参时报类型错误。
• 定义明确的类型接口不仅能解决类型问题，还能提前规避拼写错误，提升代码可维护性。

内容的提问来源于stack exchange，提问作者Diego Rios