获取Provider时Next-auth报错：TypeError: providers不是函数

错误核心 #

你从next-auth/react导入的providers并非可调用函数，它是NextAuth用于客户端上下文的工具对象，强行把它当成函数调用就会触发这个类型错误。正确获取配置的登录服务商列表，需要使用服务端的getProviders方法。

修正步骤 #

1. 调整导入语句：移除next-auth/react中的providers导入，改为从next-auth/server导入getProviders
2. 替换服务端调用逻辑：将providers(context)替换为getProviders()

修正后的完整代码 #

import React from "react";
import { getSession } from "next-auth/react";
import { getProviders } from "next-auth/server";

const Login = ({ providers, session}) => {
  return (
    <div>
      {providers.google?.name}
    </div>
  );
};

export async function getServerSideProps(context) {
  return {
    props: {
      providers: await getProviders(),
      session: await getSession(context),
    },
  };
}

export default Login;

额外提示 #

• 加上可选链?.可以避免providers.google不存在时触发新的报错
• 确认你的NextAuth配置文件（通常是pages/api/auth/[...nextauth].js）已经正确配置了Google等登录服务商

内容的提问来源于stack exchange，提问作者עמית לוי