RTK Query中为Query指定返回类型时TS报错，如何为API数据指定类型？

在使用 RTK Query 为 query 指定返回类型时出现 TypeScript 类型不匹配错误，代码及错误信息如下：

错误代码 #

interface CurriculumDetailsApi {
  curriculum_id: number;
  curriculum_name: string;
  description: string;
  percentage_of_completion: number;
  post_id: string;
  post_type: string;
  topics: Topics[];
}

const apiWithTaggedEndpoints = apiWithTag.injectEndpoints({
  endpoints: builder => ({
    curriculumDetails: builder.query<CurriculumDetailsApi, input>({
      query: payload => ({
        url: `/${payload.postId}/${payload.employeeId}`,
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
      }),
    }),
  }),
  overrideExisting: true,
});

错误信息 #

Type '(payload: Args) => { url: string; method: string; headers: { 'Content-Type': string; }; }' is not assignable to type '(arg: Args) => string'.
  Type '{ url: string; method: string; headers: { 'Content-Type': string; }; }' is not assignable to type 'string'.ts(2322)
endpointDefinitions.d.ts(36, 5): The expected type comes from property 'query' which is declared here on type 'Omit<EndpointDefinitionWithQuery<Args, BaseQueryFn<string, unknown, { reason: string; }, { shout?: boolean | undefined; }, { timestamp: number; }>, CurriculumDetailsApi> & { ...; } & { ...; } & QueryExtraOptions<...>, "type"> | Omit<...>'

问题原因 #

错误核心是你的 query 函数返回了包含 url、method、headers 的配置对象，但当前使用的 baseQuery 只接受字符串类型的 URL作为参数，导致类型不匹配。同时你未定义 input 类型，也会引发类型校验问题。

解决步骤 #

• 定义输入参数类型
  先为 query 的入参 payload 明确类型：

  interface CurriculumDetailsInput {
    postId: string;
    employeeId: string;
  }
  

• 确保 baseQuery 支持请求配置对象
  如果你的 apiWithTag 基于自定义 baseQuery 创建，且该函数仅接受字符串 URL，需修改它以支持完整请求配置对象；或者直接使用 RTK Query 内置的 fetchBaseQuery（默认支持返回包含 url、method、headers 的配置对象）。

  正确创建 apiWithTag 的示例：

  import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
  
  const apiWithTag = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: '/your-api-base-url' }), // 替换为实际接口前缀
    tagTypes: ['Curriculum'], // 根据业务需求定义标签类型
    endpoints: () => ({}),
  });
  

• 修正 query 函数的类型匹配
  将 input 替换为刚定义的 CurriculumDetailsInput，确保类型完整：

  const apiWithTaggedEndpoints = apiWithTag.injectEndpoints({
    endpoints: builder => ({
      curriculumDetails: builder.query<CurriculumDetailsApi, CurriculumDetailsInput>({
        query: payload => ({
          url: `/${payload.postId}/${payload.employeeId}`,
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        }),
      }),
    }),
    overrideExisting: true,
  });
  

额外说明 #

• 若无需在 query 中单独设置 headers，可将通用请求头配置放到 fetchBaseQuery 的初始化参数中，简化代码。
• Topics 类型也需提前定义，避免出现未定义的类型错误。

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