Next.js集成tRPC时遇‘无法找到tRPC Context’错误求助

1. 直接原因：未在根组件注入tRPC上下文 #

你明确提到没把tRPC的上下文提供者包裹应用根组件，这就是触发Unable to find tRPC Context错误的核心原因——tRPC的useQuery这类客户端钩子必须在上下文范围内才能拿到tRPC实例。

tRPC v11 + App Router 正确配置方式 #

tRPC v11在App Router里已经不再使用withTRPC高阶组件，改用TRPCProvider实现上下文注入：

• 先创建tRPC客户端实例：

// src/trpc/client.ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '@/server/trpc/router';

export const trpc = createTRPCReact<AppRouter>();

• 在根布局src/app/layout.tsx里包裹整个应用：

// src/app/layout.tsx
import { TRPCProvider } from '@trpc/react-query/provider';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { trpc } from '@/trpc/client';
import { httpBatchLink } from '@trpc/client';

const queryClient = new QueryClient();

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        <QueryClientProvider client={queryClient}>
          <TRPCProvider
            client={trpc}
            queryClient={queryClient}
            createClient={() => ({
              links: [
                httpBatchLink({
                  url: '/api/trpc', // 对应你的tRPC API端点路径
                }),
              ],
            })}
          >
            {children}
          </TRPCProvider>
        </QueryClientProvider>
      </body>
    </html>
  );
}

2. 验证API端点配置 #

确认tRPC的API路由src/app/api/trpc/[trpc]/route.ts配置正确：

// src/app/api/trpc/[trpc]/route.ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { appRouter } from '@/server/trpc/router';
import { createContext } from '@/server/trpc/context';

const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: '/api/trpc',
    req,
    router: appRouter,
    createContext,
  });

export { handler as GET, handler as POST };

3. 客户端页面调用检查 #

确保auth-callback/page.tsx里的代码符合要求：

// src/app/auth-callback/page.tsx
'use client'; // 必须添加，因为useQuery是客户端钩子

import { trpc } from '@/trpc/client';

export default function AuthCallbackPage() {
  const { data, isLoading } = trpc.authCallback.useQuery();

  if (isLoading) return <div>加载中...</div>;

  return <div>授权回调结果：{JSON.stringify(data)}</div>;
}

4. 其他注意点 #

• 禁止使用旧版withTRPC，tRPC v11对App Router已弃用该方式，强制使用TRPCProvider。
• 检查依赖版本匹配：tRPC v11需要@trpc/react-query v5+、@tanstack/react-query v5+，版本不匹配也会引发异常。

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