Next-Auth登录组件报错TypeError: Cannot read properties of null (reading 'name')

1. 组件参数接收错误：Login组件直接将providers作为函数参数，但React组件的入参是包含所有props的对象，此时providers实际指向的是整个props对象，而非传入的providers属性。当尝试遍历Object.values(providers)时，若props中没有正确传入目标参数，就会导致后续读取provider.name失败。
2. getProviders返回null/空值：如果Next-Auth的配置文件（pages/api/auth/[...nextauth].js）中未配置任何登录提供商，或配置存在错误，getProviders()会返回null，此时Object.values(null)会触发错误，进而导致读取provider.name时抛出TypeError。

1. 修正组件props接收方式：使用对象解构获取providers属性，确保正确拿到从getServerSideProps传入的参数。
2. 添加空值校验：在遍历前先判断providers是否存在，避免对null/undefined进行操作；同时给provider.name添加可选链，增强代码健壮性。
3. 检查Next-Auth配置：确认[...nextauth].js中已正确配置至少一个登录提供商（如Google、GitHub等）。

import { getProviders, signIn } from "next-auth/react";

// 解构获取providers props
function Login({ providers }) {
  return (
    <div>
      <img className="w-52 mb-5" src="https://links.papareact.com/9xl" alt="" />

      {/* 先判断providers是否存在，再遍历 */}
      {providers && Object.values(providers).map((provider) => (
        <div key={provider.id}> {/* 添加key属性，符合React列表渲染要求 */}
          {/* 使用可选链处理可能的null provider */}
          <button onClick={() => signIn(provider.id)}>Login with {provider?.name}</button>
        </div>
      ))}
    </div>
  );
}

export default Login;

export async function getServerSideProps() {
  const providers = await getProviders();

  return {
    props: {
      providers,
    },
  };
}

确保pages/api/auth/[...nextauth].js文件已正确配置，示例如下（以Google提供商为例）：

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
});

同时需在.env.local文件中配置对应提供商的密钥（如GOOGLE_CLIENT_ID和GOOGLE_CLIENT_SECRET）。

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