react-bootstrap使用Navbar报TS错误无构造或调用签名如何解决？

• 导入语法错误：react-bootstrap 单组件路径的导出方式为命名导出，你当前使用默认导入语法import Navbar from 'react-bootstrap/Navbar'拿到的是模块对象而非组件本身，将对象作为JSX元素调用时，就会触发JSX element type does not have any construct or call signatures的TypeScript错误，和你组件本身的导出写法无关。
• 低版本类型缺失：如果使用react-bootstrap 1.x及更早版本，可能存在内置类型声明不完整的问题。

• 调整导入语法为命名导入，两种可选写法：
  1. 保留单组件路径导入的写法，修改为命名导入：

  // 修改所有react-bootstrap组件的导入为命名导入
  import { Navbar } from 'react-bootstrap/Navbar'
  import { Container } from 'react-bootstrap/Container'
  import { Nav } from 'react-bootstrap/Nav'
  

  2. 直接从react-bootstrap全量包做命名导入（更简洁，官方推荐写法）：

  import { Navbar, Container, Nav } from 'react-bootstrap'
  

• 若使用1.x旧版本，安装对应版本的类型声明包：

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

import { Navbar, Container, Nav } from 'react-bootstrap'

export const NavbarPage = () => {
    return (
      <>
        <Navbar bg="dark" variant="dark">
          <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
          </Container>
        </Navbar>
    </>
    )
}

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