Next.js引入NextAuth的SessionProvider报useState of null错误

在Next.js应用中接入next-auth的SessionProvider时，抛出TypeError: Cannot read property 'useState' of null错误。
当前项目Google账号登录功能单独运行正常，仅在接入SessionProvider后触发报错，日志打印session值为空对象，相关配置代码如下：

_app.tsx代码：

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { SessionProvider } from 'next-auth/react'

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

[...nextauth].js代码：

import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
  pages: {
      signIn: "/auth/signin",

  }
})

按优先级依次排查以下问题：

• 检查版本兼容性：TypeError: Cannot read property 'useState' of null最常见诱因是版本不匹配。React 18+搭配Next.js 12及以上版本时，必须使用v4及以上稳定版next-auth；如果使用Next.js 13+ App Router模式，SessionProvider属于客户端组件，单独封装provider组件时必须在顶部添加'use client'指令，服务端组件直接引入会因无法调用React Hook触发报错
• 修复_app.tsx缺失导出问题：提供的_app.tsx代码缺失默认导出语句，Next.js无法正确加载应用入口会导致上下文初始化异常，在文件末尾补充export default MyApp即可
• 排查多React实例冲突：依赖安装异常导致node_modules中存在多个版本React、或react与react-dom版本不一致时，也会触发Hook调用空值错误，执行以下命令清理依赖后重装：

# 删除现有依赖和锁文件
rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml
# 重新安装依赖
npm install
# 安装匹配版本的next-auth
npm install next-auth@latest

• 校验next-auth路由配置路径：Pages Router模式下[...nextauth].js必须放置在pages/api/auth/目录下，路径错误会导致鉴权接口无法正常注册，直接返回空session值。同时可以清理配置中多余的换行和语法冗余，修正后的配置参考：

// 正确路径：pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
  pages: {
    signIn: "/auth/signin"
  }
})

• 校验Hook调用范围：useSession等next-auth提供的Hook只能在SessionProvider包裹的子组件中调用，在Provider外层、_app.tsx根组件直接调用会出现session值为空、Hook报错的问题

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