使用tRPC的useQuery无法接收查询输入，TS编译报错求助

你遇到的问题核心是前端trpc客户端没有和后端router的类型关联起来，导致TypeScript无法正确推断greet接口接受的输入参数类型，默认将输入参数视为null | undefined，从而引发类型不匹配错误。

解决方案步骤： #

1. 后端导出Router类型

首先在后端代码中，导出router的类型定义，供前端使用：

import { initTRPC } from '@trpc/server';
import z from 'zod';

const trpc = initTRPC.create();

export const appRouter = trpc
  .router()
  .query("greet", {
    input: z
      .object({
        name: z.string().nullish(),
      })
      .default({ name: "World" }),
    resolve({ input }) {
      return {
        message: `Hello ${input.name?.toUpperCase()}!`,
      };
    },
  });

// 导出router的类型，必须确保这一步存在
export type AppRouter = typeof appRouter;

2. 前端创建类型化的TRPC客户端

在前端项目中，创建trpc客户端时指定后端导出的AppRouter类型，让TypeScript能正确推断所有接口的输入输出类型：

// 比如在 src/trpc.ts 文件中
import { createTRPCReact } from '@trpc/react-query';
// 导入后端的AppRouter类型，路径根据你的项目结构调整
import type { AppRouter } from '../path/to/your/backend/file';

// 创建带类型的trpc客户端
export const trpc = createTRPCReact<AppRouter>();

3. 配置TRPC Provider

在你的根组件（比如_app.tsx或App.tsx）中，初始化trpc客户端并配置Provider：

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { trpc } from './trpc';
import { httpBatchLink } from '@trpc/client';

const queryClient = new QueryClient();

function App({ children }) {
  const trpcClient = trpc.createClient({
    links: [
      httpBatchLink({
        url: '/api/trpc', // 替换成你的trpc API地址
      }),
    ],
  });

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </trpc.Provider>
  );
}

export default App;

4. 重新调用useQuery

完成上述配置后，再调用useQuery时，TypeScript就能正确识别输入参数的类型，不会再报错：

const greet = trpc.useQuery(["greet", { name: "Maria" }]);

额外检查点 #

• 确认后端的AppRouter类型已经正确导出，且前端导入路径无拼写错误
• 确保使用的trpc和react-query版本匹配（建议使用官方文档推荐的版本组合）

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