React项目使用React Bootstrap报useRef空值读取错误求助

DevOps 小满

2026-7-25

解决React Bootstrap的"Cannot read properties of null (reading 'useRef')"错误

这个错误几乎都是React与React Bootstrap版本不兼容或依赖安装/导入错误导致的，给你最直白的新手友好解决方案：

1. 匹配版本（最常见原因）

React Bootstrap v2.x 需要React 16.14.0+/ReactDOM 16.14.0+；v3.x 需要React 18.0+。

终端执行npm list react react-dom react-bootstrap查看当前版本
版本不匹配的话，先卸载现有包：
```
npm uninstall react-bootstrap bootstrap
```
安装对应兼容版本（React 18直接装最新版）：
```
npm install react-bootstrap bootstrap
```

2. 修正组件导入方式

别导入Bootstrap原生JS，只用React封装的组件：

// Header.js 正确示例
import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';

const Header = () => {
  return (
    <Navbar bg="light" expand="lg">
      <Navbar.Brand href="#home">React Bootstrap Demo</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="me-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#link">Link</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
};

export default Header;

3. 确保根组件渲染正确

React 18的渲染方式要对应：

// index.js 正确示例
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css'; // 只导入CSS，不要导入JS

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);