使用Ant Design Layout组件时触发useContext空值读取错误求助

报错信息 #

react.development.js:1618 Uncaught TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (react.development.js:1618:1)
    at Space (index.js:32:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
useContext @ react.development.js:1618
Space @ index.js:32
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:18687 The above error occurred in the <Space> component:

    at Space (http://localhost:3000/black-dashboard-react/static/js/bundle.js:98111:62)
    at Home
    at Route (http://localhost:3000/black-dashboard-react/static/js/bundle.js:76119:29)
    at Switch (http://localhost:3000/black-dashboard-react/static/js/bundle.js:76290:29)
    at Router (http://localhost:3000/black-dashboard-react/static/js/bundle.js:75801:30)
    at BrowserRouter (http://localhost:3000/black-dashboard-react/static/js/bundle.js:75458:35)
    at BackgroundColorWrapper (http://localhost:3000/black-dashboard-react/static/js/bundle.js:31:66)
    at ThemeContextWrapper (http://localhost:3000/black-dashboard-react/static/js/bundle.js:2094:66)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

我的代码 #

const headerStyle = {
  textAlign: 'center',
  color: '#fff',
  height: 64,
  paddingInline: 50,
  lineHeight: '64px',
  backgroundColor: '#7dbcea',
};
const contentStyle = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#108ee9',
};
const footerStyle = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: '#7dbcea',
};
function Home () {
  return(
    <>
        <Space
            direction="vertical"
            style={{
                width: '100%',
            }}
            size={[0, 48]}
        >
            <Layout>
                <Header style={headerStyle}>Hello</Header>
                <Content style={contentStyle}>Content</Content>
                <Footer style={footerStyle}>Footer</Footer>
            </Layout>
        </Space>
    </>
  )
};

解决方案 #

错误原因 #

这个报错本质是useContext无法读取null的属性，通常由以下几种情况导致：

• Ant Design与React版本不兼容
• 组件未正确导入
• 项目中存在多个React实例
• 不必要的Space组件使用（单个组件无需用Space包裹）

解决步骤 #

1. 检查版本兼容性
   确认Ant Design版本和React版本匹配：

   • Ant Design v5 需要 React 17.0+
   • Ant Design v4 需要 React 16.9+
     可以在package.json中查看版本，不匹配则升级/降级对应依赖。

2. 确认组件导入
   确保所有使用的Ant Design组件都正确导入：

   import { Space, Layout, Header, Content, Footer } from 'antd';
   

   不要遗漏或错误导入组件。

3. 清理依赖重新安装
   删除node_modules、package-lock.json（或yarn.lock），然后重新安装依赖：

   rm -rf node_modules package-lock.json
   npm install
   

   这可以避免项目中存在多个React实例导致的上下文冲突。

4. 优化组件使用
   你的代码中Space仅包裹了一个Layout组件，而Space的作用是给多个组件添加间距，单个组件完全不需要使用Space包裹。直接移除Space即可简化代码并避免潜在问题：

修改后的代码 #

import { Layout, Header, Content, Footer } from 'antd';

const headerStyle = {
  textAlign: 'center',
  color: '#fff',
  height: 64,
  paddingInline: 50,
  lineHeight: '64px',
  backgroundColor: '#7dbcea',
};
const contentStyle = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#108ee9',
};
const footerStyle = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: '#7dbcea',
};
function Home () {
  return(
    <Layout>
      <Header style={headerStyle}>Hello</Header>
      <Content style={contentStyle}>Content</Content>
      <Footer style={footerStyle}>Footer</Footer>
    </Layout>
  )
};

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