NextJS中getServerSideProps内next-auth自定义Session类型服务端不生效求助

核心问题分析 #

客户端类型增强正常，但服务端通过unstable_getServerSession获取的Session仍为原始DefaultSession类型，且出现id未定义、序列化错误，本质是类型增强覆盖不全+服务端Session数据未正确从JWT映射导致的。

分步解决方案 #

1. 确保TypeScript识别类型增强文件 #

• 把next-auth.d.ts放在项目根目录或src目录下（若使用src结构）
• 检查tsconfig.json的include数组，确保包含该文件：

{
  "include": ["next-auth.d.ts", "**/*.ts", "**/*.tsx"]
}

2. 完善类型增强（覆盖JWT和Session） #

凭证流默认使用JWT策略，需同时增强next-auth/jwt类型，修改next-auth.d.ts：

import NextAuth, { DefaultSession } from "next-auth";
import { JWT } from "next-auth/jwt";

declare module "next-auth" {
  interface Session extends DefaultSession {
    user: {
      id: string;
      email: string;
    };
  }
}

declare module "next-auth/jwt" {
  interface JWT {
    id: string;
    email: string;
  }
}

3. 配置authOptions的回调函数，确保数据正确传递 #

在pages/api/auth/[...nextauth].ts中，通过jwt和session回调把用户数据存入JWT并映射到Session：

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export const authOptions = {
  providers: [
    CredentialsProvider({
      async authorize(credentials) {
        // 这里替换成你的凭证验证逻辑（比如从数据库查询用户）
        const user = await db.user.findUnique({
          where: { email: credentials?.email },
        });
        if (!user) throw new Error("用户不存在");
        // 密码验证逻辑省略，验证通过后返回用户核心数据
        return { id: user.id, email: user.email };
      },
    }),
  ],
  session: { strategy: "jwt" }, // 显式声明JWT策略
  callbacks: {
    async jwt({ token, user }) {
      // 用户登录时，把authorize返回的用户数据存入token
      if (user) {
        token.id = user.id;
        token.email = user.email;
      }
      return token;
    },
    async session({ session, token }) {
      // 把JWT中的数据映射到Session对象
      if (session.user) {
        session.user.id = token.id;
        session.user.email = token.email;
      }
      return session;
    },
  },
};

export default NextAuth(authOptions);

4. 修复服务端getServerSideProps的类型问题 #

若自动类型推断失效，可手动指定Session类型：

import { GetServerSideProps } from "next";
import { unstable_getServerSession } from "next-auth/next";
import { authOptions } from "../pages/api/auth/[...nextauth]"; // 替换为你的authOptions路径
import type { Session } from "next-auth";

export const getServerSideProps: GetServerSideProps = async (context) => {
  const session = await unstable_getServerSession(
    context.req,
    context.res,
    authOptions
  ) as Session;

  if (!session) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }

  // 现在可以正常访问session.user.id和session.user.email
  console.log(session.user.id);

  return {
    props: { session },
  };
};

5. 解决序列化错误 #

原始DefaultSession中的name/image字段在自定义Session中不存在，需：

• 移除页面组件中对session.user.name或session.user.image的访问逻辑
• 确保session回调仅返回你需要的字段，避免残留多余属性

验证步骤 #

1. 重启TypeScript服务（Ctrl+C后重新启动开发服务器）
2. 重新登录，确保authorize返回正确的用户数据
3. 在服务端打印Session，确认id和email字段存在

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