将 GetServerSideProps 与 Next-Auth 结合使用：TypeError：无法解构“req.query”的属性“nextauth”，因为它未定义

Question

我在 next.js 中使用 getServerSideProps 函数和 Next-Auth ，但出现 TypeError：

TypeError: Cannot destructure property 'nextauth' of 'req.query' as it is undefined.

当我使用控制台检查时，它确实返回未定义。

我一直在关注 NextAuth.js 的官方文档：https ://next-auth.js.org/configuration/nextjs#getserversession

我的功能：

export const getServerSideProps = async (context: { req: NextApiRequest; res: NextApiResponse<any>; }) => {

  const session = await getServerSession(context.req, context.res, authOptions)

  if (!session) {
    return {
      redirect: {
        destination: '/',
        permanent: false
      }
    }
  }

  return {
    props: {
      session,
    }
  }
}

当我做：

const {req: query} = context
console.log(query == undefined)

控制台返回 false，但 TypeError 仍然存在。

当我更改此函数的 props 时，我收到不同的错误：

export const getServerSideProps = async (req: NextApiRequest, res: NextApiResponse<any>) => {

  const session = await getServerSession(req, res, authOptions)

  if (!session) {
    return {
      redirect: {
        destination: '/',
        permanent: false
      }
    }
  }

  return {
    props: {
      session,
    }
  }
}

那么错误是：

My _App: TypeError: Cannot read properties of undefined (reading 'x-forwarded-host')

export default function App({
  Component, pageProps: { session, ...pageProps}}: AppProps, {emotionCache = clientSideEmotionCache,}){

 return (
    <SessionProvider session={pageProps.session}>
      <CacheProvider value={emotionCache}>
        <ThemeProvider theme={lightTheme}>
          <CssBaseline />
            <Component {...pageProps} />
        </ThemeProvider>
      </CacheProvider>
    </SessionProvider>
 );
};

关于下一步该做什么有什么建议吗？

Answer 1

我不确定你是否设法解决了这个问题（如果你做到了，请告诉我！），但我面临着我认为与你的问题完全相同的问题，即使是在 GitHub 上提出了问题关于它。我会让您知道返回的内容，但可能值得考虑的一件事是您正在运行的 NextAuth 版本。