如何在Next.js的getStaticProps中使用RTK Query获取的数据（调用报错）

你遇到的报错核心原因和getStaticProps的函数名无关，所有以use开头的React Hook，只能在React函数组件、自定义React Hook的顶层作用域调用，而getStaticProps是Next.js在服务端执行的预渲染异步函数，完全不属于React组件的执行上下文，天然不能调用任何Hook。

RTK Query本身提供了脱离React Hook的请求调用方式，直接调用你定义的API实例上对应接口的initiate方法即可：

步骤1：确认你的RTK Query API定义 #

假设你定义API的文件结构如下（示例）：

// src/services/eventsApi.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import type { EventType } from '你的类型定义文件路径'

export const eventsApi = createApi({
  reducerPath: 'eventsApi',
  baseQuery: fetchBaseQuery({ baseUrl: '你的接口根地址' }),
  endpoints: (builder) => ({
    getEvents: builder.query<EventType[], string>({
      query: (arg) => `/events?param=${arg}`,
    }),
  }),
})

// 你之前用的useGetEventsQuery就是自动生成的Hook
export const { useGetEventsQuery } = eventsApi

步骤2：修改getStaticProps调用逻辑 #

在getStaticProps中引入上面的eventsApi实例，直接调用接口方法拿数据：

import { eventsApi } from '你的路径/src/services/eventsApi'
import type { GetStaticProps } from 'next'
import type { ParsedUrlQuery } from 'querystring'

type Props = {
  events: EventType[];
  isSuccess: boolean;
  isLoading: boolean;
};

interface Params extends ParsedUrlQuery {
  id: string;
}

const Pages = function (props: Props) {
  console.log(props);

  return (
    <>
      <Header />
      <EventSearch />
      <EventList events={props.events} />
    </>
  );
};

export const getStaticProps: GetStaticProps<Props, Params> = async (
  context
) => {
  const params = context.params!;
  try {
    // 直接调用initiate方法触发请求，unwrap()获取返回的原始数据
    const events = await eventsApi.endpoints.getEvents.initiate("").unwrap()
    return {
      props: {
        events,
        isSuccess: true,
        isLoading: false,
      },
      // 可选配置：静态页面增量更新周期，单位秒
      revalidate: 60
    };
  } catch (err) {
    // 请求失败处理，比如返回404页面
    return {
      notFound: true
    }
  }
};

export default Pages;

如果你需要把预渲染拿到的数据注入到客户端的RTK Query缓存中，避免客户端重复发起相同请求，可以在Next.js的_app.tsx中用RTK Query提供的<Hydrate>组件做缓存同步：

// _app.tsx
import { Provider } from 'react-redux'
import { Hydrate } from '@reduxjs/toolkit/query/react'
import { store } from '你的store定义路径'
import { eventsApi } from '你的路径/src/services/eventsApi'

export default function App({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Hydrate state={pageProps[eventsApi.reducerPath]}>
        <Component {...pageProps} />
      </Hydrate>
    </Provider>
  )
}

• 你的代码中提到的DataFetcher如果是自定义React Hook，同样不能在getStaticProps中调用，需要改成普通异步函数或者也用上面的RTK Query非Hook调用方式。
• 该方案同样适用于getServerSideProps、Next.js API路由等所有非React组件上下文的请求场景。

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