React报错：Cannot read properties of null (reading 'useContext')求助

我是React初学者，在实现Navbar组件并添加Material-UI元素时遇到如下错误：

Unexpected Application Error!
Cannot read properties of null (reading 'useContext')
TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (http://localhost:3000/static/js/bundle.js:58534:25)
    at useTheme (http://localhost:3000/static/js/bundle.js:53459:59)
    at useTheme (http://localhost:3000/static/js/bundle.js:53369:77)
    at useThemeProps (http://localhost:3000/static/js/bundle.js:53424:68)
    at useThemeProps (http://localhost:3000/static/js/bundle.js:50503:65)
    at SvgIcon (http://localhost:3000/static/js/bundle.js:49311:82)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:25325:22)
    at updateForwardRef (http://localhost:3000/static/js/bundle.js:27896:24)
    at beginWork (http://localhost:3000/static/js/bundle.js:29943:20)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:34870:18)

相关代码 #

App.js（不含导入语句）

const Layout = () =>{
  return(
    <div className="app">
        <Navbar/>
        <Outlet/>
        <Footer/>
        footer
    </div>
  )
}
const router = createBrowserRouter([
  {
    path:"/",
    element: <Layout/>,
    children:[
      {
        path:"/",
        element: <Home/>
      },
    ]
  },
]);

function App() {
  return (
    <div className="App">
       <RouterProvider router={router} />
    </div>
  );
}
export default App;

Navbar.jsx（不含导入语句）

<div className='left'>
           <div className="item">
                <MenuOutlinedIcon/>
           </div>
           <div className="item">
                <Link to= "/">Blog</Link>
           </div>
        </div>
  </div>

解决方案 #

这个错误的核心原因是Material-UI的组件需要在ThemeProvider提供的上下文环境中使用，当前代码未添加该上下文，导致MenuOutlinedIcon内部调用useTheme时无法获取主题上下文，抛出useContext读取null的错误。

按以下步骤修改：

1. 确保已安装Material-UI相关依赖（未安装则执行）：

npm install @mui/material @emotion/react @emotion/styled

2. 修改App.js，导入并使用ThemeProvider和createTheme：

// 新增导入
import { ThemeProvider, createTheme } from '@mui/material/styles';

// 创建基础主题
const theme = createTheme();

const Layout = () =>{
  return(
    <div className="app">
        <Navbar/>
        <Outlet/>
        <Footer/>
        footer
    </div>
  )
}
const router = createBrowserRouter([
  {
    path:"/",
    element: <Layout/>,
    children:[
      {
        path:"/",
        element: <Home/>
      },
    ]
  },
]);

function App() {
  return (
    <ThemeProvider theme={theme}> {/* 用ThemeProvider包裹整个应用 */}
      <div className="App">
         <RouterProvider router={router} />
      </div>
    </ThemeProvider>
  );
}
export default App;

修改后，Material-UI组件可正常获取主题上下文，错误即可修复。

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