如何在ReactQuery useMutation中为Axios无内容响应指定TypeScript类型

错误根源分析 #

你看到的报错不是因为TData影响了TVariables，本质是mutation函数的返回类型和你指定的TData不兼容：

• 你给useMutation指定的TData是AxiosResponse<null>，意味着mutation函数需要返回Promise<AxiosResponse<null>>
• 但你的mutation函数实际返回的是AxiosPromise<object>（axios默认把无内容响应的data推断为object）
• 这两个Promise的resolve值类型（AxiosResponse<object> vs AxiosResponse<null>）不兼容，TypeScript在类型校验时会逐层追溯，最终报错信息里提到了参数类型，但这只是类型不匹配的连锁提示，不是TData直接影响TVariables。

解决方案 #

要让类型匹配，只需要让axios请求明确返回AxiosResponse<null>即可，有两种方式：

方式1：给axios请求指定泛型（推荐） #

在调用axios时，通过泛型指定响应data的类型为null，这样axios会返回AxiosPromise<null>，和你指定的TData对齐：

import { useMutation } from '@tanstack/react-query';
import axios from 'axios';

interface ParamsInterface {
  param1: string;
  param2: number;
}

interface ErrorResponseType {
  // 你的错误响应结构
}

const useMyMutation = () => {
  return useMutation<AxiosResponse<null>, AxiosError<ErrorResponseType>, ParamsInterface>(
    ({ param1, param2 }) => {
      // 这里用axios的泛型指定data为null
      return axios.delete<null>('/api/your-endpoint', {
        params: { param1, param2 }
      });
    }
  );
};

方式2：类型断言（仅在确认响应确实无内容时使用） #

如果因为某些原因无法修改axios请求的泛型，可以在mutation函数里断言返回类型：

return useMutation<AxiosResponse<null>, AxiosError<ErrorResponseType>, ParamsInterface>(
  ({ param1, param2 }) => {
    return axios.delete('/api/your-endpoint', {
      params: { param1, param2 }
    }) as AxiosPromise<null>;
  }
);

关于你的疑惑：为什么报错里提到了TVariables？ #

TypeScript在校验函数类型不匹配时，会从返回值到参数逐层检查兼容性。当mutation函数的返回类型不符合MutationFunction<TData, TVariables>的要求时，TypeScript会认为整个mutation函数的类型和期望的MutationFunction不匹配，进而提示参数部分的类型关联，但这并不代表TData直接影响TVariables的类型，只是类型校验的连锁反馈。

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