React+Firebase项目重构后Login组件无法作为JSX组件使用导致登录路由空白问题求助

大家好，我正在基于React开发的项目中整合Firebase Authentication和Firestore，用react-router-dom v6+做路由管理。最近重构了AuthContext（认证上下文）和App.tsx的路由逻辑后，遇到了一个棘手的问题：访问/login路由时，Login组件完全不渲染，要么是空白页，要么弹出路由相关的报错，卡了好一阵没解决，想请大家帮忙分析下！

问题演变过程 #

最开始我遇到的是Login.tsx里的setUserRoleFlags函数参数错误："Expected 2 arguments, but got 0"，这是因为我把角色状态的管理分散了，没有集中在AuthContext里。

于是我做了以下重构：

• 修改AuthContext，新增了一个login函数，接收用户数据后统一处理角色状态的设置
• 调整Login.tsx，在从Firestore获取用户数据后，调用这个统一的login函数

这一步确实解决了参数不匹配的错误，但紧接着就出现了路由和渲染的问题：访问/login直接空白，控制台一直报**"'Login' cannot be used as a JSX component"**，错误指向App.tsx里使用<Login />的那一行。

我已经尝试过的排查&修复步骤 #

为了解决这个问题，我几乎把能想到的点都查了一遍：

• 检查Login组件的定义和导出：确认在Login.tsx里是用export default Login或者正确的命名导出，没有写错
• 核对App.tsx里Login组件的导入路径和名称，确保拼写、大小写都对
• 检查App.tsx里<Route path="/login" element={<Login />} />的写法，修复过路由标签漏写闭合括号的问题
• 把App.tsx的路由逻辑抽成了单独的AppRoutes组件，用了react-router-dom v6标准的嵌套路由写法
• 做了彻底的清理重装：删了node_modules、.vite、dist文件夹，重新install依赖，再做clean build
• 修复了一堆语法错误：比如Login.tsx里重复的React导入、错误使用React.lazy的写法、Route标签后多余的字符
• 修正了App.tsx里的路由组件语法错误

但折腾了这么久，那个**"'Login' cannot be used as a JSX component"**的错误还是顽固地存在，访问/login依然是空白页。

关键代码片段 #

App.tsx中路由相关代码（AppRoutes组件内） #

{/* AUTHENTICATION ROUTES */}
<Route path="/login" element={
  isAuthenticated ? (
    isAdmin ? (
      // 校验用户是否为管理员
      <Navigate to="/admin" replace />
    ) : isExecutive ? (
      // 校验是否为执行岗用户
      <Navigate to="/admin/executive" replace />
    ) : (
      <Navigate to="/dashboard" replace />
    )
  ) : (
    <Login />
  )
} />

AuthContext.tsx核心修改部分 #

我在AuthContext里新增了统一的login方法，用来处理登录后用户数据和角色状态的设置：

// 简化后的核心代码
const login = async (user: User, userDocData: FirestoreUserDoc) => {
  setCurrentUser(user);
  // 根据Firestore返回的用户数据设置角色状态
  setIsAdmin(userDocData.role === 'admin' || userDocData.role === 'super_admin');
  setIsExecutive(userDocData.role === 'executive');
  // 其他状态设置...
};

想请教大家的点 #

我已经把能排查的语法、导入导出、路由写法、依赖问题都过了一遍，但这个JSX组件的错误还是挥之不去。有没有大佬遇到过类似的问题？或者有没有我漏掉的细节？比如组件的类型定义问题？或者AuthContext的状态和路由渲染的联动逻辑有坑？

内容来源于stack exchange