TypeError：无法将 undefined 或 null 转换为对象 - Typescript & Next.js答案

【问题标题】：TypeError: Cannot convert undefined or null to object - Typescript & Next.jsTypeError：无法将 undefined 或 null 转换为对象 - Typescript & Next.js
【发布时间】：2022-02-12 07:00:44
【问题描述】：

photo of error

我正在尝试呈现一个允许我拥有登录功能的按钮。我正在使用 Typescript 和 NextAuth。我添加了一个用于验证类型的文件以尝试解决问题，但由于某种原因，我无法在此处使用 Object 和这些映射参数。

在这种情况下，我将provider 类型设置为any。代码编辑器中没有错误，但在 DOM 上，类型错误仍然存在。

import { getProviders, signIn } from 'next-auth/react'
function Login({ providers }) {
return (
<div>
    <img className='w-52 mb-5' src="https://links.papareact.com/9xl" alt="Spotify logo at sign-in" />

    {Object.values(providers).map((provider:any) => (
        <div key={provider.name}>
            <button>Login with {provider.name}</button>
        </div>
    ))}
</div>
);
}

export default Login;

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

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

在这种情况下，我删除了provider 的类型，代码编辑器为provider.name 生成了一个错误，指出“类型'未知' 上不存在属性'名称'。”

import { getProviders, signIn } from 'next-auth/react'
function Login({ providers }) {
return (
<div>
    <img className='w-52 mb-5' src="https://links.papareact.com/9xl" alt="Spotify logo at sign-in" />

    {Object.values(providers).map((provider) => (
        <div key={provider.name}>
            <button>Login with {provider.name}</button>
        </div>
    ))}
</div>
);
}

export default Login;

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

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

这是我的打字文件：

export interface Providers {
provider: string;
name: string;
_id: string;  
}

我尝试了一些方法来尝试解决错误。我是 Typescript 的新手，这是我第一次使用 NextAuth，因此我们将不胜感激！

谢谢！

【问题讨论】：

getProviders() 是否返回了预期的 providers 对象？

标签： typescript object next.js typescript-typings next-auth

【解决方案1】：

看起来您可以使用 next 内置的 InferGetServerSideProps 来推断下一个身份验证的类型并为自己节省一些工作。

看看这个例子：

import { getProviders, signIn } from 'next-auth/react'
import { InferGetServerSidePropsType } from 'next'

export default function SignIn({
  providers,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <>
      {Object.values(providers).map((provider) => (
        <div key={provider.name}>
          <button onClick={() => signIn(provider.id)}>
            Sign in with {provider.name}
          </button>
        </div>
      ))}
    </>
  )
}

export const getServerSideProps = async () => {
  return {
    props: {
      providers: await getProviders(),
    },
  }
}

由于 NextAuth.js 是用 Typescript 编写的，它可以根据 getProviders() 的返回值自动推断类型 ?

【讨论】：