Next.js + NextAuth SessionProvider无法读取session属性(TypeScript)

我在使用Mantine模板结合NextAuth开发应用时，集成SessionProvider遇到以下问题：

• 直接使用<SessionProvider session={session}>时，报错ReferenceError: session is not defined；
• 改用<SessionProvider session={pageProps.session}>时，报错TypeError: Cannot read properties of undefined (reading 'session')；
• 自定义Session类型后问题仍存在；
• 使用<SessionProvider session={props.session}>无报错，但页面刷新或切换标签后会话丢失。

初始_app.tsx代码 #

import { GetServerSidePropsContext } from 'next';
import { useState } from 'react';
import { AppProps } from 'next/app';
import { getCookie, setCookie } from 'cookies-next';
import Head from 'next/head';
import { MantineProvider, ColorScheme, ColorSchemeProvider } from '@mantine/core';
import { NotificationsProvider } from '@mantine/notifications';
import { SessionProvider } from 'next-auth/react';
import { ApolloProvider } from '@apollo/client';
import client from '../apollo-client';

export default function App(props: AppProps & { colorScheme: ColorScheme }) {
  const { Component, pageProps } = props;
  const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);

  const toggleColorScheme = (value?: ColorScheme) => {
    const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
    setColorScheme(nextColorScheme);
    setCookie('mantine-color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
  };

  return (
    <>
      <Head>
        <title>Family 5 Dashboard</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
        <link rel="shortcut icon" href="/icono.png" />
      </Head>

      <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
        <MantineProvider theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
          <NotificationsProvider>
            <SessionProvider session={session}>
              <ApolloProvider client={client}>
                <Component {...pageProps} />
              </ApolloProvider>
            </SessionProvider>
          </NotificationsProvider>
        </MantineProvider>
      </ColorSchemeProvider>
    </>
  );
}

App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
  colorScheme: getCookie('mantine-color-scheme', ctx) || 'dark',
});

错误信息1 #

error - pages\_app.tsx (33:38) @ App
error - ReferenceError: session is not defined
    at App (webpack-internal:///./pages/_app.tsx:85:38)
    ...

改用pageProps.session后的错误 #

error - pages\_app.tsx (33:48) @ App
error - TypeError: Cannot read properties of undefined (reading 'session')
    at App (webpack-internal:///./pages/_app.tsx:85:48)
    ...

/api/auth/[...nextauth].js代码 #

import NextAuth from "next-auth"
import { ApolloClient, InMemoryCache } from "@apollo/client";
import CredentialsProvider from "next-auth/providers/credentials";
import { GET_ADMIN_LOGIN } from "../../../components/fam.querys";

export default NextAuth({

    providers: [
        CredentialsProvider({
            session: {
                strategy: 'jwt',
                maxAge: 30 * 24 * 60 * 60, //30 days
                updateAge: 24 * 60 * 60, // 24 hours
            },
            name: "Credentials",
            credentials: {
                email: { label: "email", type: "email", placeholder: "correo" },
                password: { label: "Password", type: "password", placeholder: 'clave' }
            },
            async authorize(credentials, req) {
                if (credentials.email !== 'john@gmail.com' || credentials.password !== '1234') {
                    return null;
                }
                return { id: '1234', name: 'john', email: 'john@gmail.com', tipo: 'extra' };
            }
        })
    ],

    callbacks: {
        session: async ({ session, token }) => {
            if (session?.user) {
                session.user.id = token.uid;
                session.user.tipo = token.tipo;
            }
            console.log('sesion: ', session)
            return session;
        },
        jwt: async ({ user, token }) => {
            if (user) {
                token.uid = user.id;
                token.tipo = user.tipo;
            }
            console.log('token: ', token)
            console.log('user: ', user)
            return token;
        },
    },
    pages: {
        signIn: '/',
    },
});

自定义Session类型代码 #

import {
  Session
} from 'next-auth';
import {
  JWT
} from 'next-auth/jwt';

declare module 'next-auth' {
  interface Session {
    expires: string;
    user: {
      email: string;
      id: number;
      name: string;
      tipo: string;
    };
  }
}

修改后仍出现的错误 #

TypeError: Cannot read properties of undefined (reading 'session')
    at App (webpack-internal:///./pages/_app.tsx:75:36)
    ...

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