RTK Query报错：useGetProductsQuery不是函数问题求助

问题场景 #

定义的useGetProductsQuery无法被识别，运行时报错：

(0 , _slices_productsApiSlice__WEBPACK_IMPORTED_MODULE_0__.useGetProductsQuery) is not a function
TypeError: (0 , _slices_productsApiSlice__WEBPACK_IMPORTED_MODULE_0__.useGetProductsQuery) is not a function

相关代码如下：

productsApiSlice.js #

import { PRODUCTS_URL } from "../constants";
import { apiSlice } from "./apiSlice";

export const productsApiSlice = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        getProducts: builder.query({
            query: () => ({
                url: PRODUCTS_URL,
            }),
            keepUnusedDataFor: 5,
        }),
    }),
});

export const { useGetProductsQuery } = productsApiSlice;

组件代码 #

import { useGetProductsQuery } from "../slices/productsApiSlice";

function HomeScreen() {
    const { data: products, isLoading, error } = useGetProductsQuery();

    return (
        <div className="row">
            {isLoading ? (
                <h2>Loading...</h2>
            ) : error ? (
                <div>{error?.data?.message || error.error}</div>
            ) : (
                <p>test</p>
            )}
        </div>
    );
}

排查与解决步骤 #

1. 验证apiSlice的创建合法性 #

injectEndpoints必须基于RTK Query的createApi实例运行。确认你的apiSlice是通过正确方式创建的：

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

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: () => ({}),
});

若apiSlice不是createApi生成的实例，injectEndpoints无法生成正确的hook。

2. 核对导入导出路径与文件名 #

• 确认组件中import的相对路径../slices/productsApiSlice准确对应文件位置（比如组件在src/screens目录时，../slices指向src/slices）
• 注意文件名大小写（Linux/macOS环境下大小写敏感，比如ProductsApiSlice.js与productsApiSlice.js会被视为不同文件）

3. 适配RTK Query版本 #

旧版本Redux Toolkit中，injectEndpoints生成的hook可能无法直接解构获取，可修改导出方式：

// productsApiSlice.js
export const useGetProductsQuery = productsApiSlice.endpoints.getProducts.useQuery;

更推荐升级到最新版@reduxjs/toolkit，保证自动命名hook的正常生成。

4. 清除缓存并重启服务 #

Webpack缓存可能导致模块导出异常，执行以下操作：

• 停止开发服务器
• 删除node_modules/.cache或项目的dist/build目录
• 重新启动开发服务

5. 确保hook在React组件内调用 #

useGetProductsQuery是React Hook，必须在函数组件或自定义Hook内调用，不能在普通函数、类组件或组件外部使用（你的代码中调用位置是正确的，后续调整需注意此规则）

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