React+TypeScript中JSX子元素类型不匹配报错求助

错误根源 #

你在JSX中使用的a.map((aa) => console.log(11))会返回一个包含3个undefined的数组——因为console.log没有返回值，默认返回undefined。这3个undefined会被当作<div>的子元素，但它们并非有效的React Node类型，同时多个无效节点的存在触发了TypeScript的类型校验错误。

解决方案 #

根据你的需求选择对应方案：

方案1：仅需遍历执行打印操作 #

如果只是想遍历数组执行console.log，不要把遍历逻辑放在JSX内部，移到return语句之外即可：

import '../styles/sidebar.css'

const Sidebar: React.FC = () => {
  const a = [1,2,3]
  // 在return外部执行遍历打印
  a.forEach((aa) => console.log(11))
  
  return (
    <div className="sidebar">
      <ul className="sdebar_lst">
        <li className="lsthead">Departments</li>
        <li id="it" className="list_elm1">IT</li>
        <li id="hr" className="list_elm1">Human Resources</li>
        <li id="md" className="list_elm1">MD</li>
        <li id="sales" className="list_elm1">Sales</li>
      </ul>
    </div>
  )
}

export default Sidebar

方案2：通过map渲染React元素 #

如果需要遍历数组渲染元素，确保map的回调返回有效的React节点，同时给每个元素添加唯一的key属性：

import '../styles/sidebar.css'

const Sidebar: React.FC = () => {
  const a = [1,2,3]
  
  return (
    <div className="sidebar">
      {
        a.map((aa) => (
          // 返回有效的React节点，并添加唯一key
          <span key={aa}>元素{aa}</span>
        ))
      }
      <ul className="sdebar_lst">
        <li className="lsthead">Departments</li>
        <li id="it" className="list_elm1">IT</li>
        <li id="hr" className="list_elm1">Human Resources</li>
        <li id="md" className="list_elm1">MD</li>
        <li id="sales" className="list_elm1">Sales</li>
      </ul>
    </div>
  )
}

export default Sidebar

额外提示 #

React组件名建议使用大驼峰命名（如Sidebar而非sidebar），这是React的规范约定，能避免潜在的组件识别问题。

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