Next Auth v4扩展User Schema添字段：session.user.role类型错误问题

要让TypeScript识别自定义的role字段，需要完成以下三步：

1. 扩展NextAuth的TypeScript类型 #

创建types/next-auth.d.ts文件（无types目录则新建），通过模块扩展覆盖NextAuth的默认类型：

import NextAuth from "next-auth"

declare module "next-auth" {
  // 扩展User类型，添加role字段
  interface User {
    role: "USER" | "ADMIN"
  }

  // 扩展Session类型，确保session.user包含role
  interface Session {
    user: User & {
      role: "USER" | "ADMIN"
    }
  }
}

TypeScript会自动读取该文件，识别user对象的role属性。

2. 更新NextAuth配置，添加Session回调 #

默认NextAuth不会将自定义字段（如role）加入session，需在authOptions中添加callbacks.session，将数据库中的user.role同步到session：

export const authOptions = {
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
      profile(profile) {
        return {
          id: profile.id,
          name: profile.name,
          email: profile.email,
          image: profile.avatar_url,
          role: 'USER',
        }
      },
    }),
  ],
  adapter: MongoDBAdapter(
    new Promise((resolve) => resolve(mongoose.connection.getClient()))
  ),
  // 添加回调配置
  callbacks: {
    async session({ session, user }) {
      session.user.role = user.role;
      return session;
    },
  },
}

同时可移除profile函数上的//@ts-ignore，此时返回对象已符合扩展后的User类型。

3. 确保Mongoose User Schema包含role字段 #

检查你的User模型，确保Schema定义了role字段，避免数据库中缺失该字段：

import mongoose from 'mongoose';

const UserSchema = new mongoose.Schema({
  name: String,
  email: { type: String, unique: true },
  image: String,
  role: {
    type: String,
    enum: ['USER', 'ADMIN'],
    default: 'USER',
  },
  // 其他已有字段...
});

export const User = mongoose.models.User || mongoose.model('User', UserSchema);

最后清理代码 #

现在可删除UserProvider中session?.user?.role前的//@ts-ignore，TypeScript会正确识别该字段，不再报错。

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