Server Error : TypeError: Cannot convert undefined or null to object

Question

这是代码

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

function signIn({ providers }) {
    return (
        <>
            {Object.values(providers).map((provider) => (
                <div key={provider.name}>
                    <button onClick={() => SignIntoProvider(provider.id)}>
                        Sign in with {provider.name}
                    </button>
                </div>
            ))}
        </>
    )
}

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

    return {
        props: {
            providers
        }
    }
}

export default signIn

我从官方网站粘贴 NextAuth.js 示例代码时遇到此错误。我有最新版本的 Node.js 和 Next.js。

你可以在这里找到完整的源代码https://github.com/aadipoddar/instagram-react

Answer 1

这是 map 函数在 providers 实际具有任何值之前被调用的结果。
您可以使用条件渲染来避免此类问题。

试试这个：

{providers && providers.length && Object.values(providers).map((provider) => ( ...

您可以通过将其存储在变量中使其看起来更好。

像这样：

function signIn({ providers }) {
    const checkProviders = (
       providers &&
       providers.length
    );

    return (
        <>
            {checkProviders && Object.values(providers).map((provider) => (
                <div key={provider.name}>
                    <button onClick={() => SignIntoProvider(provider.id)}>
                        Sign in with {provider.name}
                    </button>
                </div>
            ))}
        </>
    )
}

Answer 2

为您的客户端url正确配置您的NEXTAUTH_URL，例如

NEXTAUTH_URL=http://localhost:3000

Answer 3

确保你的 NEXTAUTH_URL=http://localhost:3000 而不是 https://localhost:3000

Server Error : TypeError: Cannot convert undefined or null to object

Server Error : TypeError: Cannot convert undefined or null to object

javascript

node.js

reactjs

next.js

next-auth