React内联条件渲染组件报错：期望字符串却得到对象

问题场景 #

使用React 18.2.0搭配MUI框架，想要通过内联条件运算符（&&）在menudata === "Home"时渲染Home组件，编写的代码如下：

import Home from './components/Home';

// 其他代码...

<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
  {menudata === "Home" && <Home />}
</Box>

运行时出现错误提示：

Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: object. You
likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.

Home组件代码：

import React from 'react'

const Home = () => {
  return (
    <div>Home</div>
  )
}

export default Home

排查与解决方法 #

1. 检查文件路径与大小写 #

确认导入路径./components/Home完全匹配实际文件的位置和文件名大小写。Linux/macOS环境下文件名区分大小写，如果实际文件是home.js而导入时写Home.js，会导致加载失败，最终Home会是无效对象。

2. 清理开发环境缓存 #

开发服务器（如webpack-dev-server）的缓存可能导致组件未正确加载，尝试：

• 重启开发服务器
• 用快捷键Ctrl+Shift+R/Cmd+Shift+R清除浏览器缓存
• 使用Create React App时，执行npm start --reset-cache重置缓存

3. 验证导出与导入方式 #

临时切换为命名导入排查默认导出的隐性问题：
修改Home组件导出：

import React from 'react'

export const Home = () => {
  return (
    <div>Home</div>
  )
}

修改导入语句：

import { Home } from './components/Home';

如果这样能正常渲染，说明原默认导出/导入环节存在意外问题（如文件内有其他干扰导出）。

4. 确认menudata的类型 #

打印menudata的类型和值排除条件判断干扰：

console.log(typeof menudata, menudata);

若menudata不是字符串类型，menudata === "Home"会始终为false，但这不会直接引发组件类型错误，仅用于排除干扰项。

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