Next.js 13中使用Context API遇元素类型无效错误求助

错误原因 #

你遇到的核心问题是导入匹配错误：在layout.js中你默认导入的是AuthContext（一个Context对象，并非React组件），却将它当作<AuthProvider>组件来渲染，这直接导致了元素类型无效的错误。

解决方案 #

有两种可行的修正方式，任选其一即可：

方式一：修正layout.js的导入语句（推荐） #

保持AuthProvider.js的导出结构不变，在layout.js中改为命名导入AuthProvider组件：

// layout.js
import 'bootstrap/dist/css/bootstrap.min.css';
import '@/styles/globals.css';
// 替换默认导入为命名导入
import { AuthProvider } from '@/context/AuthProvider';

const RootLayout = ({ children }) => {
  return (
    <html lang="en">
      <body>
        <main className="app">
          <section>
            <div className="container">
              <div className="card o-card">
                <div className="card-body">
                  <AuthProvider>{children}</AuthProvider>
                </div>
              </div>
            </div>
          </section>
        </main>
      </body>
    </html>
  )
}

export default RootLayout

方式二：修改AuthProvider.js的导出规则 #

将AuthProvider设为默认导出，保持layout.js的导入语句不变：

// AuthProvider.js 
'use client';

import { createContext, useState } from "react";

// 将AuthContext改为命名导出
export const AuthContext = createContext({});

const AuthProvider = ({ children }) => {
    const [auth, setAuth] = useState('');

    return (
        <AuthContext.Provider value={{ auth, setAuth }}>
            {children}
        </AuthContext.Provider>
    )
}

// 将AuthProvider设为默认导出
export default AuthProvider;

补充说明 #

Next.js 13允许在服务器组件中直接嵌套客户端组件，但必须确保你渲染的是一个合法的React组件（函数或类组件），而非Context对象这类非组件值。你之前的代码正是因为误将Context对象当作组件渲染，才触发了该错误。

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