React函数组件条件渲染报错：Cannot convert undefined or null to object

问题根源 #

你的代码存在三个核心问题：

1. 空值未处理：当projectDialog?.links为undefined或null时，Object.keys()会直接抛出类型错误，因为无法将空值转换为对象。
2. 类型判断逻辑错误：用Object.keys().length区分数组和对象完全不可靠——数组的Object.keys()返回的是索引字符串数组（比如长度为1的数组会返回["0"]，长度为1），这会导致单个元素的数组被误判为单个对象，进而执行错误的渲染逻辑。
3. 数组/对象属性访问混淆：如果误将数组当成对象访问projectDialog.links.link，会得到undefined，引发后续潜在问题。

最优修复方案：统一格式后渲染 #

最简洁的方式是先把单个链接对象统一转换成数组，然后用同一套逻辑渲染，彻底消除条件分支：

// 先统一格式：数组直接用，单个对象转成数组，空值返回空数组
const linksArray = Array.isArray(projectDialog?.links)
  ? projectDialog.links
  : (projectDialog?.links ? [projectDialog.links] : []);

// 统一渲染
{linksArray.map((link, index) => (
  <a
    href={link.link}
    target="_blank"
    rel="noopener noreferrer" // 安全最佳实践，防止target="_blank"的钓鱼风险
    key={index} // 若link有唯一id，建议替换为link.id
    className="projectDialog_icons"
  >
    {link.icon}
  </a>
))}

备选方案：显式类型判断的条件渲染 #

如果坚持使用条件分支，必须先判断空值和类型，避免错误：

{(() => {
  const links = projectDialog?.links;
  // 空值直接返回null，不渲染任何内容
  if (!links) return null;
  
  // 数组类型：循环渲染
  if (Array.isArray(links)) {
    return links.map((link, index) => (
      <a
        href={link.link}
        target="_blank"
        rel="noopener noreferrer"
        key={index}
        className="projectDialog_icons"
      >
        {link.icon}
      </a>
    ));
  } 
  // 对象类型：渲染单个链接
  else {
    return (
      <a
        href={links.link}
        target="_blank"
        rel="noopener noreferrer"
        className="projectDialog_icons"
      >
        {links.icon}
      </a>
    );
  }
})()}

额外注意事项 #

• 避免用数组索引作为key：如果每个链接对象有唯一标识（比如id），优先使用该标识作为key，提升React渲染性能。
• 安全处理target="_blank"：必须添加rel="noopener noreferrer"，防止页面被恶意利用。

内容的提问来源于stack exchange，提问作者Sercan Noyan Germiyanoğlu