Next.js+TypeScript项目Vercel部署因Next-auth类型报错如何解决？

问题根源 #

你本地直接修改了node_modules/next-auth下的类型定义文件，该修改仅在本地生效。Vercel部署时会重新安装所有依赖，你对node_modules内文件的修改会被完全重置，因此自定义的id字段类型失效，触发编译错误。

正确修复步骤 #

步骤1：新增项目级类型扩展文件 #

不要直接修改第三方依赖的类型文件，在项目根目录新建types/next-auth.d.ts文件，使用TypeScript的声明合并特性扩展Next-auth的原生类型：

import NextAuth, { DefaultSession, DefaultUser, DefaultJWT } from "next-auth"

declare module "next-auth" {
  // 扩展User类型
  interface User extends DefaultUser {
    id?: string | null
  }

  // 扩展Session类型
  interface Session {
    user?: {
      id?: string | null
    } & DefaultSession["user"]
    expires?: string
  }

  // 扩展JWT类型
  interface JWT extends DefaultJWT {
    id?: string | null
  }
}

步骤2：配置tsconfig.json识别声明文件 #

确认你的tsconfig.json中的include数组包含了该声明文件，示例配置：

{
  "compilerOptions": { /* 原有配置 */ },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "types/**/*.d.ts"],
  "exclude": ["node_modules"]
}

步骤3：修正session回调参数（可选优化） #

你开启了JWT会话模式，session回调的第二个参数实际是JWT对象，建议调整参数名避免混淆，代码可改为：

callbacks: {
  jwt: async (token, user) => {
    if (user) {
      token.id = user.id;
    }
    return Promise.resolve(token);
  },
  session: async (session, token) => {
    if (session.user) {
      session.user.id = token.id as string;
    }
    return Promise.resolve(session);
  }
}

临时应急方案 #

如果需要快速部署，可以在next.config.js中临时关闭构建时的TypeScript类型检查（不推荐长期使用）：

module.exports = {
  typescript: {
    ignoreBuildErrors: true
  }
}

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