React+TypeScript中RTK Query生成钩子报‘属性不存在’错误求助

常见错误原因及修复方案 #

1. 检查createApi的定义与导出 #

确保你正确使用createApi创建API切片，并直接从生成的API对象导出自动生成的钩子。示例代码：

// todoApi.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

// 定义Todo类型（根据业务调整）
interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

export const todoApi = createApi({
  reducerPath: 'todoApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    fetchTodos: builder.query<Todo[], void>({
      query: () => '/todos',
    }),
    addTodo: builder.mutation<Todo, Partial<Todo>>({
      query: (newTodo) => ({
        url: '/todos',
        method: 'POST',
        body: newTodo,
      }),
    }),
    removeTodo: builder.mutation<void, number>({
      query: (id) => ({
        url: `/todos/${id}`,
        method: 'DELETE',
      }),
    }),
  }),
});

// 钩子命名规则：use + Endpoint名称 + Query/Mutation，必须从todoApi直接导出
export const { useFetchTodosQuery, useAddTodoMutation, useRemoveTodoMutation } = todoApi;

注意：钩子名称严格对应端点名称，比如fetchTodos端点对应useFetchTodosQuery，别写错名称。

2. 确认Store中正确注册API切片 #

在Store配置里，必须将API切片的reducer和middleware正确添加：

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import { todoApi } from './todoApi';

export const store = configureStore({
  reducer: {
    // 这里的key必须和todoApi的reducerPath完全一致
    [todoApi.reducerPath]: todoApi.reducer,
  },
  // 追加RTK Query的middleware到默认中间件数组
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(todoApi.middleware),
});

// 可选但推荐：导出类型方便组件使用
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

如果reducerPath不匹配或未添加middleware，会导致TypeScript无法识别钩子类型。

3. 验证依赖版本兼容性 #

确认以下包的版本满足要求：

• @reduxjs/toolkit ≥ 1.6.0（RTK Query稳定版起始版本）
• react-redux ≥ 7.2.6
• typescript ≥ 4.3.5

执行命令安装最新兼容版本：

npm install @reduxjs/toolkit@latest react-redux@latest typescript@latest

4. 清除TypeScript缓存 #

TypeScript缓存可能引发类型推断异常，执行以下操作清除：

# 删除node_modules下的缓存目录
rm -rf node_modules/.cache
# 删除编译输出目录（比如dist，根据你的tsconfig.json调整）
rm -rf dist

之后重启IDE（如VS Code），让其重新加载类型定义。

5. 检查导入路径正确性 #

确保在组件中导入钩子的路径无误：

import { useFetchTodosQuery } from './todoApi';

路径错误或导入了错误的对象，也会触发“属性不存在”的报错。

若以上方案都无法解决问题，请提供你的todoApi.ts和store.ts完整代码，以便进一步排查。

内容的提问来源于stack exchange，提问作者красюк виктор