Next.js中trpc.authCallback的useQuery钩子onSuccess回调报错

我在Next.js应用里使用tRPC的authCallback对应的useQuery钩子时，尝试添加onSuccess回调，但TypeScript始终报错，提示onSuccess不属于useQuery的可用选项，即便我已经给回调内的success参数明确定义了类型。

代码示例 #

import { useRouter, useSearchParams } from "next/navigation";
import { trpc } from "../_trpc/client";

const Page = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const origin = searchParams.get("origin");
  
  const { data, isLoading } = trpc.authCallback.useQuery(undefined, {
    // 尝试明确定义success参数类型解决TypeScript错误
    onSuccess: ({ success }: { success: boolean }) => {
      if (success) {
        router.push(origin ? `/${origin}` : '/dashboard');
      }
    }
  });

  return null; // 或加载指示器组件
};

export default Page;

错误信息 #

No overload matches this call.
Overload 1 of 2, '(input: void | typeof skipToken, opts: DefinedUseTRPCQueryOptions<{ success: boolean; }, { success: boolean; }, TRPCClientErrorLike<{ errorShape: DefaultErrorShape; transformer: false; }>, { ...; }>): DefinedUseTRPCQueryResult<...>', gave the following error.
Object literal may only specify known properties, and 'onSuccess' does not exist in type 'DefinedUseTRPCQueryOptions<{ success: boolean; }, { success: boolean; }, TRPCClientErrorLike<{ errorShape: DefaultErrorShape; transformer: false; }>, { success: boolean; }>'.
Overload 2 of 2, '(input: void | typeof skipToken, opts?: UseTRPCQueryOptions<{ success: boolean; }, { success: boolean; }, TRPCClientErrorLike<{ input: void; output: { success: boolean; }; transformer: false; errorShape: DefaultErrorShape; }>, { ...; }> | undefined): UseTRPCQueryResult<...>', gave the following error.
Object literal may only specify known properties, and 'onSuccess' does not exist in type 'UseTRPCQueryOptions<{ success: boolean; }, { success: boolean; }, TRPCClientErrorLike<{ input: void; output: { success: boolean; }; transformer: false; errorShape: DefaultErrorShape; }>, { ...; }>'.ts(2769)
(property) onSuccess: ({ success }: {
    success: boolean;
}) => void

已尝试操作 #

• 给onSuccess回调内的success参数明确定义类型
• 查阅tRPC文档确认authCallback.useQuery使用onSuccess的特殊要求
• 网上搜索同类问题但未找到有效解决方案

预期结果 #

原本以为给参数明确类型后，TypeScript就能正确识别，代码可以无错误运行。

解决方案 #

1. 用useEffect替代直接传入onSuccess #

tRPC v10+ 的useQuery类型定义不再直接暴露onSuccess选项，最直接的修复方式是通过useEffect监听查询结果data的变化，执行对应逻辑：

import { useRouter, useSearchParams } from "next/navigation";
import { trpc } from "../_trpc/client";
import { useEffect } from "react";

const Page = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const origin = searchParams.get("origin");
  
  const { data, isLoading } = trpc.authCallback.useQuery(undefined);

  useEffect(() => {
    if (data?.success) {
      router.push(origin ? `/${origin}` : '/dashboard');
    }
  }, [data, router, origin]);

  return null; // 或加载指示器组件
};

export default Page;

2. 全局/查询级配置onSuccess（可选） #

如果需要复用回调逻辑，可以通过React Query的QueryClient给特定查询设置默认onSuccess：

// ../_trpc/client.ts
import { createTRPCReact } from "@trpc/react-query";
import type { AppRouter } from "../server/router";
import { QueryClient } from "@tanstack/react-query";

export const trpc = createTRPCReact<AppRouter>();

// 初始化QueryClient时配置
const queryClient = new QueryClient();

// 给authCallback查询设置默认onSuccess
queryClient.setQueryDefaults(['authCallback'], {
  onSuccess: (data) => {
    // 这里可以处理通用逻辑，若需要组件内的路由实例，推荐还是用useEffect方案
  },
});

3. 确认tRPC客户端依赖版本 #

确保你的项目依赖的是@trpc/react-query而非旧版tRPC包，因为tRPC的useQuery是基于React Query封装的，版本不匹配也可能导致类型定义异常。

内容的提问来源于stack exchange，提问作者youssef-lou