React类组件转函数组件报JSX类型无效错误求助

React项目运行时抛出如下错误：

React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at Navbar.js:8.
at NavbarComponent
at ThemeContextProvider

报错触发场景为将教程中基于类组件的React Context实现改写为函数组件时。

1. 导入路径错误是直接原因：ThemeContext定义在ThemeContext.js文件中，但Navbar.js里的导入语句写的是import { ThemeContext } from "../helpers"，该路径下的模块没有正确导出ThemeContext，导致导入得到的ThemeContext值为undefined，渲染<ThemeContext.Consumer>时就会触发组件类型无效的报错，和报错提示完全匹配。
2. 存在隐藏逻辑bug：当前写的toggleTheme方法执行setTheme({ isLight: !theme.isLight })时，会覆盖掉state中原有的light、dark字段，第一次切换主题后就会出现主题取值为undefined的异常。
3. 潜在命名冲突风险：从react-bootstrap导入的组件名Navbar和教程示例中的自定义导航组件同名，后续调整代码时容易出现组件覆盖问题。

• 修正导入路径：将Navbar.js中ThemeContext的导入路径改为实际存放ThemeContext.js的路径，例如如果文件存放在src/contexts目录下，就写为：

  import { ThemeContext } from "../contexts/ThemeContext";
  

  如果需要从helpers目录统一导出，要在helpers/index.js中添加重导出语句：

  export { ThemeContext, default as ThemeContextProvider } from "../contexts/ThemeContext";
  

  路径按实际项目目录结构调整即可。
• 修复主题切换逻辑：修改ThemeContext.js中的toggleTheme方法，用函数式更新保留原有状态字段，避免属性丢失：

  const toggleTheme = () => {
    setTheme(prevState => ({ ...prevState, isLight: !prevState.isLight }));
  };
  

• 规避命名冲突：将react-bootstrap导入的Navbar组件重命名，避免后续混淆：

  import { Navbar as BootstrapNavbar, Nav, Container } from "react-bootstrap";
  

  后续使用react-bootstrap的导航栏相关组件时，替换为BootstrapNavbar前缀即可，比如<BootstrapNavbar.Brand>、<BootstrapNavbar.Toggle>。

ThemeContext.js #

import { createContext, useState } from "react";

export const ThemeContext = createContext();

function ThemeContextProvider(props) {
  const [theme, setTheme] = useState({
    isLight: true,
    light: "light",
    dark: "dark",
  });

  const toggleTheme = () => {
    setTheme(prev => ({ ...prev, isLight: !prev.isLight }));
  };

  return (
    <ThemeContext.Provider value={{ ...theme, toggleTheme }}>
      {props.children}
    </ThemeContext.Provider>
  );
}

export default ThemeContextProvider;

Navbar.js #

import { Link } from "react-router-dom";
import { Navbar as BootstrapNavbar, Nav, Container } from "react-bootstrap";
// 注意替换为你项目中ThemeContext的实际路径
import { ThemeContext } from "../contexts/ThemeContext";

function NavbarComponent() {
  return (
    <ThemeContext.Consumer>
      {(themeContext) => {
        const { isLight, light, dark } = themeContext;
        const currentTheme = isLight ? light : dark;
        return (
          <div id={currentTheme}>
            <BootstrapNavbar bg="dark" variant="dark" expand="lg">
              <Container>
                <BootstrapNavbar.Brand as={Link} to="/">
                  <h1>Brand</h1>
                </BootstrapNavbar.Brand>

                <BootstrapNavbar.Toggle aria-controls="basic-navbar-nav" />
                <BootstrapNavbar.Collapse
                  id="basic-navbar-nav"
                  className="justify-content-end"
                >
                  <Nav className="mr-auto">
                    <Nav.Link as={Link} to="/complain">
                      Complain
                    </Nav.Link>
                    <Nav.Link as={Link} to="/product">
                      Product
                    </Nav.Link>
                    <Nav.Link as={Link} to="/category">
                      Category
                    </Nav.Link>
                    <Nav.Link as={Link} to="/profile/1">
                      Profile
                    </Nav.Link>
                    <Nav.Link>Logout</Nav.Link>
                  </Nav>
                </BootstrapNavbar.Collapse>
              </Container>
            </BootstrapNavbar>
          </div>
        );
      }}
    </ThemeContext.Consumer>
  );
}

export default NavbarComponent;

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