Redux Toolkit报错：useGetTopChartQuery不是函数求助

问题背景 #

使用Redux Toolkit 1.8.5 + React 18.2.0开发时，在Discover组件中调用useGetTopChartQuery()触发上述错误，相关代码如下：

API定义文件（shazamCore.js） #

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

export const shazamCoreApi = createApi({
  reducerPath: 'shazamCoreApi',
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://shazam-core7.p.rapidapi.com',
    prepareHeaders: (headers) => {
      headers.set('X-RapidAPI-Key', 'XYZ');

      return headers;
    },
  }),

  endpoints: (builder) => ({
    getTopCharts: builder.query({ query: () => '/charts/get-top-songs-in-world' }),
  }),
});

export const { useGetTopChartQuery } = shazamCoreApi;

Discover组件（discover.jsx） #

import { Error, Loader, SongCard } from '../components';
import { genres } from '../assets/constants';
import { useGetTopChartQuery } from '../redux/services/shazamCore';

const Discover = () => {
  const { data, isFetching, error} = useGetTopChartQuery();
  const titlevalue = 'POP';
  console.log(data);

  return (
    <div className="flex flex-col ">
      <div
        className="w-full  flex justify-between items-center sm:flex-row
        flex-col mt-4 mb-10"
      >
        <h2 className="font-bold text-3xl text-white text-left">
          Discover{titlevalue}
        </h2>
        <select className="bg-black text-gray-300 text-sm p-3 rounded-lg outline-none sm:mt-0 mt-5 cursor-pointer">
          {genres.map((genre) => (
            <option
              key={genre.value}
              value={genre.value}
              className="curser-pointer "
            >
              {genre.title}
            </option>
          ))}
        </select>
      </div>

      <div className="flex flex-wrap sm:justify-start justify-center gap-8">
        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((song, i) => (
          <SongCard key={song.key} song={song} i={i} />
        ))}
      </div>
    </div>
  );
};
export default Discover;

Store配置（store.js） #

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';

import playerReducer from './features/playerSlice';
import {shazamCoreApi} from "./services/shazamCore"

export const store = configureStore({
  reducer: {
    [shazamCoreApi.reducerPath]: shazamCoreApi.reducer,
    player: playerReducer,
  },
  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(shazamCoreApi.middleware)
});

错误原因 #

核心问题是hook名称拼写错误：

• 在API定义中，endpoint的名称是getTopCharts（复数形式，末尾带s）
• 根据RTK Query的规则，自动生成的hook名称为use[EndpointName]Query，即useGetTopChartsQuery
• 但你导出和使用的是useGetTopChartQuery（单数形式，缺少末尾的s），导致找不到对应的函数，触发类型错误。

此外需额外确认：组件是否被Redux Provider包裹（若未包裹，RTK Query的hook无法正常工作）。

解决方法 #

1. 修正hook名称的拼写错误 #

修改API定义文件的导出语句：

// 原错误写法
// export const { useGetTopChartQuery } = shazamCoreApi;

// 正确写法
export const { useGetTopChartsQuery } = shazamCoreApi;

同时修改Discover组件中的导入和调用：

// 原错误写法
// import { useGetTopChartQuery } from '../redux/services/shazamCore';
// const { data, isFetching, error} = useGetTopChartQuery();

// 正确写法
import { useGetTopChartsQuery } from '../redux/services/shazamCore';
const { data, isFetching, error} = useGetTopChartsQuery();

2. 确认组件在Redux Provider范围内 #

确保根组件（如App.jsx或main.jsx）已用Redux Provider包裹：

import { Provider } from 'react-redux';
import { store } from './redux/store';
import Discover from './components/discover';

function App() {
  return (
    <Provider store={store}>
      <Discover />
    </Provider>
  );
}

export default App;

3. 验证依赖安装 #

确认已正确安装相关依赖：

npm install @reduxjs/toolkit react-redux

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