react-bootstrap NavDropdown触发Invalid hook call错误求助

错误信息 #

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

组件代码 #

function NavBar() {
  const [expanded, setExpanded] = useState(false);

  const scrollToTopAndCloseNavBar = async () => {
    await setExpanded(false);
    window.scrollTo(0, 0);
  };

  const programTitles = useSelector(
    (state) => state.contentfulReducer.programTitles
  );
  return (
    <Navbar
      className="nav-bar"
      collapseOnSelect={true}
      expand="lg"
      variant="dark"
      // sticky="top"
      expanded={expanded}
    >
      <Container>
        <Link
          style={{ textDecoration: "none" }}
          to="/"
          className="logo-container"
        >
          <img
            alt="ace_gymnastics_logo"
            src={logofull}
            width="720"
            height="720"
            className="logo"
          />
        </Link>
        <Navbar.Toggle
          onClick={() => setExpanded(expanded ? false : "expanded")}
          aria-controls="responsive-navbar-nav"
        />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link onClick={scrollToTopAndCloseNavBar} as={Link} to="/">
              Home
            </Nav.Link>
            <Nav.Link onClick={scrollToTopAndCloseNavBar} as={Link} to="/staff">
              Staff
            </Nav.Link>
            <NavDropdown title="Programs" id="collasible-nav-dropdown">
              {programTitles?.map((program, key) => {
                return (
                  <NavDropdown.Item
                    onClick={scrollToTopAndCloseNavBar}
                    key={key}
                    as={Link}
                    to={`/programs/program-details/${program.fields.displayName}`}
                  >
                    {program.fields.displayName}
                  </NavDropdown.Item>
                );
              })}
            </NavDropdown>
            <Nav.Link
              onClick={scrollToTopAndCloseNavBar}
              as={Link}
              to="/events"
            >
              Events
            </Nav.Link>
            <Nav.Link href={calendar} target="_blank">
              Calendar
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default NavBar;

问题背景 #

注释NavDropdown组件后错误消失，替换为Dropdown组件问题依旧；本地终端无报错，部署到Netlify后也无错误。

原因分析 #

1. 多React副本冲突：开发环境中，npm/yarn的嵌套依赖可能导致react-bootstrap内部使用的React实例与项目根依赖的React实例不一致。NavDropdown内部使用了React Hooks，跨实例调用Hooks会触发该错误。部署时打包工具（如Webpack）会合并重复的React副本，因此问题消失。
2. 版本兼容性问题：react-bootstrap@2.7.2要求React版本≥17.0.2，若项目的react/react-dom版本不匹配，开发环境可能出现Hook调用异常。
3. 开发环境缓存：Node_modules缓存、Webpack Dev Server缓存或浏览器缓存可能导致依赖加载异常，引发Hook错误。

解决办法 #

1. 验证版本兼容性 #

执行以下命令检查react和react-dom版本：

npm list react react-dom

确保版本满足react-bootstrap@2.7.2的要求（≥17.0.2），若不匹配，更新依赖：

npm install react@^17.0.2 react-dom@^17.0.2 --save

2. 修复多React副本问题 #

• 删除现有依赖文件并重新安装：

rm -rf node_modules package-lock.json
npm install

• 若为单仓库项目，强制所有依赖使用根目录的React实例：

npm link ./node_modules/react

3. 清理开发环境缓存 #

• 重启Webpack Dev Server或开发服务器
• 清除浏览器缓存，使用无痕模式测试
• 清理Node_modules缓存（可选）：

npm cache clean --force

4. 检查Hook使用规范 #

虽然当前组件的Hook使用符合规范，但需确认：

• programTitles.map中未引入自定义的使用Hook的组件
• 未在NavDropdown的子元素内错误调用Hook（如在事件处理函数中调用Hook）

5. 临时替代方案 #

若以上方法无效，可暂时用原生HTML下拉菜单替代NavDropdown，或升级react-bootstrap到最新兼容版本：

npm install react-bootstrap@latest --save

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