NextJS执行tRPC mutation完成后调用redirect()抛出NEXT_REDIRECT错误求助

Next.js 客户端组件中的redirect()函数是通过抛出NEXT_REDIRECT错误来触发页面导航的，但 tRPC 的useMutation回调（如onSettled）会自动捕获所有抛出的错误，导致这个导航相关的错误被暴露在控制台中。

办法一：改用useRouter的push方法导航 #

客户端组件中，Next.js 的useRouter提供了更适配客户端场景的导航方式，不会通过抛错实现跳转，因此能避免控制台错误。

修改后的代码：

"use client"

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

...

export default function SignupForm() {
    const router = useRouter()
    const authSignup = trpc.auth.signup.useMutation({
        onSettled: () => {
            console.log("Mutation Settled")
            router.push("/")
        },
    })

    async function onSubmit(values: z.infer<typeof formSchema>) {
        authSignup.mutate({
            email: values.email,
            username: values.username,
            password: values.password,
            passwordConf: values.passwordConf,
        })
    }

    ...
}

办法二：在onSubmit中等待 mutation 完成后调用redirect #

如果坚持使用redirect()，可以通过mutateAsync等待 mutation 执行完成，再直接调用redirect，这样导航抛出的错误不会被 tRPC 的回调捕获：

修改后的代码：

"use client"

import { redirect } from "next/navigation"
import { trpc } from "../_trpc/client"

...

export default function SignupForm() {
    const authSignup = trpc.auth.signup.useMutation()

    async function onSubmit(values: z.infer<typeof formSchema>) {
        try {
            await authSignup.mutateAsync({
                email: values.email,
                username: values.username,
                password: values.password,
                passwordConf: values.passwordConf,
            })
            console.log("Mutation Settled")
            redirect("/")
        } catch (err) {
            // 处理注册失败等业务错误
            console.error("Signup failed:", err)
        }
    }

    ...
}

内容的提问来源于stack exchange，提问作者Matin B.