Next-Auth CredentialsProvider中async authorize()的TypeScript类型错误

问题场景 #

使用NextAuth的单个CredentialsProvider时，结合自定义User接口处理authorize()方法出现TypeScript类型错误。

自定义User接口（types/next-auth.d.ts） #

import NextAuth from "next-auth"

declare module "next-auth" {
  interface User {
    id: string
    address: string
    name?: string
  }
}

CredentialsProvider 配置（[...nextauth].ts） #

CredentialsProvider({
  name: "Ethereum",
  credentials: {
    message: {
      label: "Message",
      type: "text",
    },
    signature: {
      label: "Signature",
      type: "text",
    },
  },
  async authorize(credentials) {
    try {
      const nextAuthUrl = process.env.NEXTAUTH_URL
      if (!nextAuthUrl) return null
      if (!credentials) return null

      // [验证凭证逻辑]
      // 已从credentials中解析出message对象

      let user = await prisma.user.findUnique({
        where: {
          address: message.address,
        },
      })
      if (!user) {
        user = await prisma.user.create({
          data: {
            address: message.address,
          },
        })
      }

      return {
        id: user.id,
        address: user.address,
        name: user.name
      }
    } catch (e) {
      console.error(e)
      return null
    }
  },
})

错误信息 #

Type '(credentials: Record<"message" | "signature", string> | undefined) => Promise<{ id: string; address: string; name: string | null; } | null>' is not assignable to type '(credentials: Record<"message" | "signature", string> | undefined, req: Pick<RequestInternal, "body" | "query" | "headers" | "method">) => Awaitable<...>'.
  Type 'Promise<{ id: string; address: string; name: string | null; } | null>' is not assignable to type 'Awaitable<User | null>'.
    Type 'Promise<{ id: string; address: string; name: string | null; } | null>' is not assignable to type 'PromiseLike<User | null>'.
      Types of property 'then' are incompatible.
        Type '<TResult1 = { id: string; address: string; name: string | null; } | null, TResult2 = never>(onfulfilled?: ((value: { id: string; address: string; name: string | null; } | null) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | ... 1 more ... | unde...' is not assignable to type '<TResult1 = User | null, TResult2 = never>(onfulfilled?: ((value: User | null) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | null | undefined) => PromiseLike<...>'.
          Types of parameters 'onfulfilled' and 'onfulfilled' are incompatible.
            Types of parameters 'value' and 'value' are incompatible.
              Type '{ id: string; address: string; name: string | null; } | null' is not assignable to type 'User | null'.
                Type '{ id: string; address: string; name: string | null; }' is not assignable to type 'User'.
                  Types of property 'name' are incompatible.
                    Type 'string | null' is not assignable to type 'string | undefined'.
                      Type 'null' is not assignable to type 'string | undefined'.

错误原因 #

自定义User接口中name字段类型为string | undefined，但从Prisma查询返回的user.name类型是string | null，TypeScript严格模式下null和undefined不兼容，导致返回对象的类型与User接口不匹配。

解决方案 #

提供两种可行修复方式：

方式1：修改自定义User接口类型 #

将name字段类型调整为string | null，与Prisma模型的类型保持一致：

import NextAuth from "next-auth"

declare module "next-auth" {
  interface User {
    id: string
    address: string
    name: string | null
  }
}

方式2：转换返回值中的null为undefined #

在authorize方法返回用户对象时，将user.name的null值转换为undefined：

return {
  id: user.id,
  address: user.address,
  name: user.name ?? undefined
}

两种方式均可解决类型不匹配问题，可根据项目的类型规范选择合适的方案。

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