Next.js App Router中调用自定义TRPCRouter报错求助

云上老周

2026-6-24

解决Next.js App Router中TRPC调用Stripe路由的报错问题

问题原因

App Router默认组件为服务器组件，而~/trpc/react导出的是客户端TRPC实例，服务器组件不允许直接访问客户端模块的属性（如api.stripe.somefunction），只能完整传递导入的模块。

解决方案分两种场景处理：

1. 在服务器组件中调用TRPC方法

需要使用服务器端TRPC调用器，而非客户端实例：

先创建服务器端TRPC调用文件（如~/trpc/server.ts）：

import { appRouter } from './routers';
import { createTRPCContext } from './context';
import { createCallerFactory } from '@trpc/server';

// 创建调用器工厂
const createCaller = createCallerFactory(appRouter);

// 传入上下文创建服务器端调用实例
export const api = createCaller(createTRPCContext({
  // 这里根据你的上下文需求传入参数，比如session、db连接等
}));

在服务器组件中导入并调用：

import { api } from '~/trpc/server';

async function ServerComponent() {
  // 直接异步调用方法（无需hooks）
  const result = await api.stripe.somefunction.query();
  
  return <div>{JSON.stringify(result)}</div>;
}

export default ServerComponent;

2. 在客户端组件中调用TRPC方法

只需给组件添加'use client'指令，标记为客户端组件后即可正常使用客户端TRPC实例：

'use client';

import { api } from '~/trpc/react';

function ClientComponent() {
  // 使用TRPC的React hooks调用方法
  const { data, isLoading } = api.stripe.somefunction.useQuery();
  
  if (isLoading) return <div>加载中...</div>;
  
  return <div>{JSON.stringify(data)}</div>;
}

export default ClientComponent;