React组件渲染报错：期望字符串/类/函数却得到undefined求助

我在React开发中遇到一个报错，已经规范了文件结构、检查了组件导入导出，但还是触发错误。预期渲染Item组件时显示对应图标（比如home图标）和文本，但控制台抛出如下错误：

元素类型无效：期望一个字符串（针对内置组件）或类/函数（针对复合组件），但得到的是：undefined。
你可能忘记从定义组件的文件中导出组件，或者混淆了默认导入和命名导入。请检查Item的渲染方法。
错误：元素类型无效：期望一个字符串（针对内置组件）或类/函数（针对复合组件），但得到的是：undefined。
你可能忘记从定义组件的文件中导出组件，或者混淆了默认导入和命名导入。

相关组件代码 #

Item.js #

import React from 'react';
import './Global.css'

const Item = ({data, Icon}) => { 
  return (
    <div class='item'>
      <Icon />
      <h2>hhh{data}</h2>
    </div>
  );
}

export default Item;

Nav.js #

import React from "react";
import Logo from "./components/Logo"
import Item from './components/Item.js'
import Tweetbutton from './components/Tweetbutton'
import Profile from './components/Profile'

const Nav = () => {
    return (
        <div class='Nav'>
            <Logo />
            <div class='Nav__wrapper'>
                <Item data="home"/>
                <Item data="home"/>
                <Item data="home"/>
                <Item data="home"/>
                <Item data="home"/>
            </div>
            <Tweetbutton />
            <Profile />
        </div>
    );
}

export default Nav;

Wrapper.js #

import React from 'react'
import Nav from './High Level/Nav/Nav'
import './wrapper.css'

function Wrapper() {
  return (
    <div>
      <Nav />
    </div>
  )
}

export default Wrapper;

App.js #

import './App.css';
import Wrapper from './components/wrapper/wrapper';

function App() {
  return (
    <div className="App">
      <Wrapper />
    </div>
  );
}

export default App;

问题原因与解决方案 #

核心问题 #

Item组件声明接收Icon属性，但在Nav.js中使用Item时完全没有传递该属性，导致Icon的值为undefined。React无法将undefined渲染为组件，因此抛出元素类型无效的错误。

解决步骤 #

1. 导入图标组件
   先确定你的图标来源（比如React Icons库、自定义SVG组件），以React Icons的HomeIcon为例，在Nav.js顶部添加导入：

import { HomeIcon } from '@heroicons/react/24/outline';

2. 传递Icon属性
   在Nav.js中使用Item组件时，将图标组件作为Icon属性传入：

<Item data="home" Icon={HomeIcon} />

3. 添加容错处理（可选）
   为避免未传递Icon时再次报错，可以在Item组件中设置默认值：

const Item = ({data, Icon = () => null}) => { 
  return (
    <div className='item'> {/* 注意：React中需用className替代class */}
      {Icon && <Icon />}
      <h2>hhh{data}</h2>
    </div>
  );
}

4. 额外优化
   React中DOM元素的类名属性是className而非class，建议将所有组件中的class替换为className，避免潜在的DOM属性解析问题。

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