无法将 undefined 或 null 转换为 Next.js 中的对象

嘿，我正在使用 Next.js 和 next-auth 构建一个登录页面 我还在providers数组中写过[...nextauth].js.

但是当我运行代码（如下所示）时：-

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

function Login({ providers }) {
  return (
    <div>
      <img src="/spot-it-aye.png" alt="" />

      {Object.values(providers).map((provider) => (
        <div key={provider.name}>
          <button
            onClick={() => signIn(provider.id, { callbackUrl: "/" })}>
            Login With {provider.name}
          </button>
        </div>
      ))}
    </div>
  );
}

export default Login;

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

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

我得到了

这是编译时的控制台

[next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error request to https://localhost:3000/api/auth/providers failed, reason: write 
EPROTO 12752:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:c:\ws\deps\openssl\openssl\ssl\record\ssl3_record.c:332:
 {
  error: {
    message: 'request to https://localhost:3000/api/auth/providers failed, reason: write EPROTO 12752:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:c:\\ws\\deps\\openssl\\openssl\\ssl\\record\\ssl3_record.c:332:\n',
    stack: 'FetchError: request to https://localhost:3000/api/auth/providers failed, reason: write EPROTO 12752:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:c:\\ws\\deps\\openssl\\openssl\\ssl\\record\\ssl3_record.c:332:\n' +       
      '\n' +
      '    at ClientRequest.<anonymous> (E:\\Coding\\VSCode\\Next JS\\spotify-2.0\\node_modules\\node-fetch\\lib\\index.js:1461:11)\n' +
      '    at ClientRequest.emit (node:events:390:28)\n' +
      '    at ClientRequest.emit (node:domain:475:12)\n' +
      '    at TLSSocket.socketErrorListener (node:_http_client:447:9)\n' +
      '    at TLSSocket.emit (node:events:390:28)\n' +
      '    at TLSSocket.emit (node:domain:475:12)\n' +
      '    at emitErrorNT (node:internal/streams/destroy:157:8)\n' +
      '    at emitErrorCloseNT (node:internal/streams/destroy:122:3)\n' +
      '    at processTicksAndRejections (node:internal/process/task_queues:83:21)',
    name: 'FetchError'
  },
  path: 'providers',
  message: 'request to https://localhost:3000/api/auth/providers failed, reason: write EPROTO 12752:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:c:\\ws\\deps\\openssl\\openssl\\ssl\\record\\ssl3_record.c:332:\n'
}

任何帮助，将不胜感激。 注意：我尝试使用

我也有同样的问题。我能够获取内部的提供者对象getServerSideProps但它并没有像它应该在页面内那样传递下去。所以这与我的方式有关_app.tsx被配置为接收pageProps.

我正在遵循一个教程，下面是我的应用程序如何配置为接收页面道具，这就是问题所在：

function MyApp({ Component, pageProps:{ session, pageProps} }: AppProps) {
    
    console.log(session);
    return (
        <SessionProvider session={session}>
            <Component {...pageProps} />
        </SessionProvider>
    )
}

export default MyApp

我将应用程序功能更改为下面的内容，这实际上确保了我的页面正在接收pageProps没有任何问题：

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <SessionProvider session={pageProps.session}>
            <Component {...pageProps} />
        </SessionProvider>
    )
}

export default MyApp