在TypeScript中使用NextAuth.js CredentialsProvider遇调用错误求助

错误原因 #

你遇到的This expression is not callable错误，本质是CredentialsProvider的导入方式错误，导致你拿到的是整个providers模块对象，而非可调用的函数。

解决步骤 #

1. 修正导入语句 #

NextAuth v4及以上版本中，CredentialsProvider需要从单独的路径导入：

// 正确导入方式
import CredentialsProvider from "next-auth/providers/credentials";

或者也可以通过命名解构导入：

import { CredentialsProvider } from "next-auth/providers";

2. 完整示例代码 #

修正导入后的完整配置示例：

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

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "Username", type: "text", placeholder: "jsmith" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials, req) {
        const user = { id: "1", name: "J Smith", email: "jsmith@example.com" };

        if (user) {
          return user;
        } else {
          return null;
        }
      }
    })
  ]
});

额外说明 #

如果你还在使用NextAuth v3（已停止维护），需确保从next-auth/providers解构导入：

import { CredentialsProvider } from "next-auth/providers";

但强烈建议升级到v4版本以获得更好的类型支持和功能更新。

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