使用Typescript时如何更新Next-auth session回调中的session类型

修复Awaitable类型报错 #

NextAuth 内置的 session 回调已经支持异步返回，不需要显式声明返回值为Awaitable<Session>类型，直接移除该返回类型声明即可，TS会自动推导返回的Session类型。

新增字段补全提示配置 #

需要通过模块声明扩展 NextAuth 的内置类型，步骤如下：

• 在项目中新增next-auth.d.ts类型声明文件，可放在根目录或自定义的types文件夹下
• 写入以下扩展代码：

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

declare module "next-auth" {
  interface Session {
    user: {
      username?: string;
      uid?: string;
    } & DefaultSession["user"];
  }

  interface User {
    username?: string;
    uid?: string;
  }
}

• 确认tsconfig.json的include配置包含该声明文件路径，示例配置：

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

简化后的回调代码 #

完成类型扩展后，你可以删掉之前的强制类型转换逻辑，session回调简化为：

callbacks: {
  async session({ session, token }) {
    if (session.user) {
      session.user.username = session.user.name
        ?.split(" ")
        .join("")
        .toLocaleLowerCase();
      session.user.uid = token.sub;
    }
    return session;
  },
}

配置完成后重启TS服务，useSession返回的session对象就会自动带出username和uid字段的类型提示，也不会再出现类型报错。

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