TypeError：无法将undefined或null转换为Typescript&Next.js

Question

错误的照片

我正在尝试呈现一个按钮，它将允许我具有登录功能。我正在使用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产生了一个错误，该错误状态为"0"；类型"unknown"上不存在属性"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，所以如果有任何帮助，我们将不胜感激！

谢谢！

Answer 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()的返回值自动推断类型