使用React-Bootstrap创建导航栏时遇TypeScript类型错误求助

问题代码 #

在src\components\header.tsx中编写的React-Bootstrap导航栏组件：

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';

function BasicExample() {
  return (
    <Navbar expand="lg" className="bg-body-tertiary">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</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>
            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>                 
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>                   
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default BasicExample;

错误信息 #

在Navbar.Brand或Container处出现以下TypeScript错误：

Type 'Element' is not assignable to type 'ReactNode'.
  Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.ts(2322)
index.d.ts(207, 9): 'children' is declared here.
index.d.ts(1466, 9): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & { ...; }, BsPrefixProps<...> & NavbarProps> & BsPrefixProps<...> & NavbarProps & { ...; }'

问题原因及解决办法 #

• 版本不兼容：这是React、React-Bootstrap和TypeScript三者版本不匹配导致的类型定义冲突，尤其常见于React 18搭配旧版本的React-Bootstrap（v5.2及以下），或TypeScript版本过高（>=5.0）与旧版类型定义不兼容。
  • 解决：升级React-Bootstrap到最新稳定版，同时确保React和TypeScript版本满足依赖要求：

    npm install react-bootstrap@latest bootstrap@latest
    

• 类型定义损坏/缺失：可能是@types/react-bootstrap或@types/react的类型文件损坏或未正确安装。
  • 解决：删除依赖缓存后重新安装：

    rm -rf node_modules package-lock.json
    npm install
    

    若仍有问题，手动安装类型定义：

    npm install @types/react-bootstrap @types/react --save-dev
    

• TS配置错误：检查tsconfig.json中的jsx配置，React 18需设置为"jsx": "react-jsx"或"react-jsxdev"，避免使用旧的"react"模式。

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