Next.js+Supabase+TRPC开发环境500错误及UNAUTHORIZED问题排查

核心问题 #

首页直接调用了需要授权的TRPC接口user.getInfo，但当前无有效登录会话（或会话关联的用户不存在），触发UNAUTHORIZED错误，进而导致页面渲染失败（500内部服务器错误）。

排查与解决步骤 #

1. 检查首页的登录状态判断逻辑 #

查看首页组件（服务器/客户端组件）代码，确认是否在未验证用户登录状态的情况下直接调用了user.getInfo：

• 如果是服务器组件，需先通过getServerSession获取会话，判断用户是否登录：

  import { getServerSession } from "next-auth/next";
  import { authOptions } from "@/app/api/auth/[...nextauth]/route";
  import { api } from "@/trpc/server";
  
  export default async function Home() {
    const session = await getServerSession(authOptions);
    if (!session) {
      // 未登录时的处理：跳转登录页或显示未登录内容
      return <div>请先登录</div>;
    }
    // 已登录时再调用授权接口
    const userInfo = await api.user.getInfo();
    return <div>欢迎，{userInfo.name}</div>;
  }
  

• 如果是客户端组件，需用useSession钩子判断登录状态，避免未登录时调用授权接口。

2. 验证TRPC的会话校验逻辑 #

查看src/server/api/trpc.ts中protectedProcedure的定义，确认会话校验是否正确：

import { TRPCError, initTRPC } from "@trpc/server";
import { getServerSession } from "next-auth/next";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";

const t = initTRPC.create();

const middleware = t.middleware(async ({ ctx, next }) => {
  const session = await getServerSession(authOptions);
  // 校验会话是否存在且包含用户信息
  if (!session || !session.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }
  return next({
    ctx: {
      ...ctx,
      session, // 传递完整会话到后续流程
    },
  });
});

export const protectedProcedure = t.procedure.use(middleware);

• 确认getServerSession是否正确传入了authOptions，确保能正常获取会话。

3. 重置会话与重新登录 #

• 清除浏览器的Cookie和缓存，避免残留的无效会话导致校验失败。
• 重新通过Google账号登录，生成新的有效会话，验证是否能正常调用user.getInfo接口。

4. 同步Prisma客户端与数据库表结构 #

修改数据库表后，需执行以下命令确保Prisma客户端与表结构同步：

npx prisma migrate dev # 应用Schema变更到数据库（开发环境）
npx prisma generate   # 重新生成Prisma客户端

5. 确认数据库中存在当前用户记录 #

由于之前数据库数据丢失，需检查Supabase数据库中的用户表，确认当前登录用户的ID（session.user.id）存在对应的记录：

• 如果用户记录不存在，可通过注册流程重新创建测试用户，或手动在数据库中插入测试数据。

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