TS报错2786：Navbar无法作为JSX组件，返回值void不是有效JSX元素

你遇到的TS错误'Navbar' cannot be used as a JSX component. Its return type 'void' is not a valid JSX element.ts(2786)的核心原因是Navbar组件没有返回合法的JSX元素，反而返回了空值（void），排查和解决方法如下：

排查思路 #

• 检查Navbar组件是否漏写return语句，或者return后没有跟随任何有效内容，仅写了return;
• 检查return语法是否符合JS规范：如果return后直接换行没有加括号，JS自动分号插入机制会截断后续内容，默认返回空值
• 检查Navbar组件的类型标注：如果手动给组件标注了返回类型为void，也会触发该报错
• 检查Navbar的导入语句是否正确，是否误将普通工具函数当做组件导入

解决方案 #

场景1：漏写return语句 #

给Navbar组件补充返回的JSX结构即可，示例：

// Navbar组件正确示例
type NavbarProps = {
  currentUser: UserType,
  setCurrentUser: (user: UserType) => void
}
const Navbar = ({ currentUser, setCurrentUser }: NavbarProps) => {
  // 组件内部逻辑
  return (
    <nav className="navbar">
      {/* 导航栏具体内容 */}
      <span>{currentUser.name}</span>
    </nav>
  )
}

场景2：return换行未加括号 #

将返回的JSX结构用括号包裹，避免自动分号插入截断内容：

// 错误写法
return
  <nav>
    {/* 导航内容 */}
  </nav>

// 修正后写法
return (
  <nav>
    {/* 导航内容 */}
  </nav>
)

场景3：返回类型标注错误 #

删除手动标注的void返回类型，改为JSX.Element，或者直接去掉返回类型标注让TypeScript自动推导即可。

场景4：导入错误 #

确认Navbar的导出方式和导入方式匹配，比如组件是默认导出就用默认导入，是命名导出就用命名导入：

// 默认导出对应导入
import Navbar from './Navbar'
// 命名导出对应导入
import { Navbar } from './Navbar'

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