使用TypeScript开发Next.js导航组件遇Unexpected token报错求助

算力阿峰

2026-8-19

错误排查：Unexpected token <header>. Expected jsx identifier

这个错误本质是JSX语法解析失败导致的，结合你在Next.js+TypeScript环境下构建导航组件的场景，按以下步骤排查：

1. 检查文件扩展名

确保Navbar.tsx和NavItem.tsx的后缀是.tsx而非.ts。.ts文件默认不支持JSX语法，解析器会把<header>当成非法token。

2. 检查`<header>`标签的语法正确性

确认<header>标签是否正确闭合，没有遗漏</header>
检查标签是否写在了合法的JSX语境中：比如在{}表达式内嵌套JSX时，复杂场景下建议用括号包裹，避免解析歧义：
```
// 复杂条件渲染建议加括号
return isLoggedIn ? (<div>...</div>) : (<header>...</header>);
```

不要在普通JavaScript语句中直接写JSX标签，比如：

// 错误示例
if (showHeader) <header>...</header>;
// 修正：将JSX赋值给变量或放入return语句
let headerContent = null;
if (showHeader) {
  headerContent = <header>...</header>;
}

3. 检查TypeScript配置

打开tsconfig.json，确认compilerOptions中的jsx配置项为preserve（Next.js默认）或react-jsx：

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

如果设置为none，TypeScript会禁用JSX解析，直接触发<header>的token错误。

4. 检查NavItem组件的导入与使用

确保NavItem.tsx中组件是大写开头导出的：

// NavItem.tsx 正确导出
export const NavItem = ({ href, label }) => {
  return <a href={href}>{label}</a>;
};

在Navbar.tsx中正确导入并使用：

// Navbar.tsx 正确导入
import { NavItem } from './NavItem';

// 正确使用（组件名必须大写）
const Navbar = () => {
  return (
    <header>
      <nav>
        <NavItem href="/" label="首页" />
      </nav>
    </header>
  );
};

如果组件名小写（如<navItem>），解析器会将其视为HTML标签，引发连锁语法错误，进而误报<header>的问题。