Next.js项目TRPC+React Query出现useContext不是函数错误的解决

问题背景 #

我正在开发一个Next.js项目，使用TRPC和React Query实现数据获取，但在src/pages/index.tsx（Home组件）中遇到了TypeError: useContext is not a function错误，涉及的配置文件包括：TRPC客户端配置（src/utils/trpc.ts）、TRPC路由（src/server/router.ts）、App组件（src/pages/_app.tsx）。

报错信息 #

error message : TypeError: react__WEBPACK_IMPORTED_MODULE_2__.useContext is not a function
    at Home (./src/pages/index.tsx:11:68)
    at stringify (<anonymous>)

已尝试操作 #

• 确认React Query已通过QueryClientProvider完成全局配置
• 尝试跳过React Query直接使用TRPC，但遇到createTRPCClient相关问题

解决方案 #

1. 排查React导入与版本问题 #

• 确保Home组件中React导入正确：必须包含useContext或直接导入完整React

  import React from 'react';
  // 或 import React, { useContext } from 'react';
  

• 检查React版本兼容性：TRPC v10+要求React 16.8+（支持Hooks），若版本过低，执行npm install react@latest react-dom@latest升级
• 清理重复React依赖：执行npm ls react查看是否存在多版本React，若有则删除node_modules和package-lock.json后重新安装依赖

2. 修正TRPC客户端与Provider配置 #

• 确保src/utils/trpc.ts正确创建TRPC React客户端：

  import { createTRPCReact } from '@trpc/react-query';
  import type { AppRouter } from '../server/router';
  
  export const trpc = createTRPCReact<AppRouter>();
  

• 在_app.tsx中正确嵌套TRPC Provider与React Query Provider：

  import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
  import { trpc } from '../utils/trpc';
  import { httpBatchLink } from '@trpc/client';
  
  const queryClient = new QueryClient();
  
  export default function MyApp({ Component, pageProps }) {
    const trpcClient = trpc.createClient({
      links: [
        httpBatchLink({ url: '/api/trpc' }),
      ],
    });
  
    return (
      <QueryClientProvider client={queryClient}>
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
          <Component {...pageProps} />
        </trpc.Provider>
      </QueryClientProvider>
    );
  }
  

3. 规范Home组件中TRPC Hooks使用 #

• 确保在组件顶层调用TRPC Hooks，且导入路径正确：

  import { trpc } from '../utils/trpc';
  
  export default function Home() {
    const greetingQuery = trpc.greeting.useQuery({ name: 'World' });
  
    if (greetingQuery.isLoading) return <div>加载中...</div>;
    return <div>{greetingQuery.data}</div>;
  }
  

• 禁止在非React组件、Hooks内部或条件判断中调用TRPC的useQuery等Hooks

替代方案 #

方案1：直接使用TRPC客户端（不依赖React Query） #

在组件中通过useEffect手动发起请求：

import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../server/router';
import { useEffect, useState } from 'react';

const trpcClient = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: '/api/trpc' })],
});

export default function Home() {
  const [greeting, setGreeting] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      const res = await trpcClient.greeting.query({ name: 'World' });
      setGreeting(res);
    };
    fetchData();
  }, []);

  return <div>{greeting || '加载中...'}</div>;
}

方案2：服务端直接调用TRPC路由（静态/服务端渲染页面） #

在getStaticProps或getServerSideProps中直接调用TRPC路由，避免客户端Hooks：

import type { GetStaticProps } from 'next';
import { appRouter } from '../server/router';
import { createContext } from '@trpc/server/adapters/next';

export default function Home({ greeting }) {
  return <div>{greeting}</div>;
}

export const getStaticProps: GetStaticProps = async () => {
  const ctx = createContext();
  const greeting = await appRouter.greeting.query({ name: 'World' }, ctx);
  return { props: { greeting } };
};

内容的提问来源于stack exchange，提问作者Deepansh .i