在Next.js中使用getServerSideProps与Next-Auth时遇TypeError求助

错误场景1：TypeError: Cannot destructure property 'nextauth' of 'req.query' as it is undefined #

• 实现代码：手动定义context类型为{ req: NextApiRequest; res: NextApiResponse<any>; }，调用getServerSession时触发错误
• 排查现象：打印context.req不为undefined，但req.query是undefined

错误场景2：修改参数后触发TypeError: Cannot read properties of undefined (reading 'x-forwarded-host') #

• 修改后的代码：将getServerSideProps参数改为(req: NextApiRequest, res: NextApiResponse<any>)
• 关联_App组件：解构pageProps时移除了session，但后续又尝试访问pageProps.session

解决步骤 #

1. 修正getServerSideProps的类型与参数结构

不要手动定义context类型，直接使用Next.js官方提供的GetServerSidePropsContext，同时必须保持参数为单个context对象，不能拆成req和res传入：

import { GetServerSidePropsContext } from 'next'
import { getServerSession } from 'next-auth/next'
import { authOptions } from '../api/auth/[...nextauth]' // 确保路径指向你的Next-Auth配置文件

export const getServerSideProps = async (context: GetServerSidePropsContext) => {
  const session = await getServerSession(context.req, context.res, authOptions)

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

  return {
    props: { session }
  }
}

2. 修复_App组件的session传递错误

你的_App组件中，解构pageProps时已经把session单独提取出来，但后续传给SessionProvider的是pageProps.session（此时pageProps里已无session），需直接使用解构后的session：

import { SessionProvider } from 'next-auth/react'
import { AppProps } from 'next/app'
// 导入你的Emotion相关依赖...

export default function App({
  Component,
  pageProps: { session, ...pageProps },
  emotionCache = clientSideEmotionCache
}: AppProps & { emotionCache?: EmotionCache }) {
  return (
    <SessionProvider session={session}> {/* 直接用解构出的session */}
      <CacheProvider value={emotionCache}>
        <ThemeProvider theme={lightTheme}>
          <CssBaseline />
          <Component {...pageProps} />
        </ThemeProvider>
      </CacheProvider>
    </SessionProvider>
  )
}

3. 优化Next-Auth配置避免请求头问题

在你的authOptions中添加trustHost: true（Next-Auth v4+支持），避免依赖平台特定请求头时出错：

import { NextAuthOptions } from 'next-auth'

export const authOptions: NextAuthOptions = {
  // 你的现有配置（providers、secret等）
  secret: process.env.NEXTAUTH_SECRET,
  providers: [/* ... */],
  // 添加以下配置
  trustHost: true
}

内容的提问来源于stack exchange，提问作者JujV