React组件渲染对象报错：Objects are not valid as a React child 求助

问题根源 #

你在map循环里直接把整个item对象塞给<li>作为子元素了——React根本没法渲染原始的JS对象，它只认字符串、React组件、DOM元素这类合法的渲染节点，这就是报错的直接原因。

修复代码 #

你需要渲染对象里的具体属性（比如icon和url），同时在TypeScript里别用any，定义明确的类型让代码更健壮：

import React from 'react';
import { social } from './data';

// 定义社交项的类型
type SocialItem = {
  id: number;
  url: string;
  icon: React.ReactNode;
};

const Navbar = () => {
  return (
    <nav>
      <div>
        {/* li必须包裹在ul/ol中，符合HTML规范 */}
        <ul>
          {social.map((item: SocialItem) => (
            // 用item的id作为key，比index更稳定
            <li key={item.id}>
              {/* 把图标做成可点击的链接 */}
              <a 
                href={item.url} 
                target="_blank" 
                rel="noopener noreferrer"
              >
                {item.icon}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </nav>
  );
};

export default Navbar;

关于非TS版本正常的说明 #

你说非TypeScript版本能正常运行，应该是因为非TS代码里你并没有直接渲染整个item对象，而是正确取出了item.icon这类属性来渲染，只是在TS版本里不小心写错成了直接渲染item才触发了报错。

内容的提问来源于stack exchange，提问作者Mahmudul Amin Fahim