数组元素类型混合引发TypeScript属性访问错误问题

问题场景 #

定义的类型与接口：

export interface MenuItemLink {
  to: string;
  label: string;
}

type MenuItem = JSX.Element | MenuItemLink;

export interface NavBarProps {
  menuItems: MenuItem[];
}

在map方法中使用数组时的代码：

const items = menuItems.map((item, index) => {
    if (item?.to) {
      return (
        <Link to={item.to} key={index}>
          <span>{item.label}</span>
        </Link>
      );
    } else {
      return item;
    }
  });

出现的TypeScript错误：

Property 'to' does not exist on type 'MenuItem'.
Property 'to' does not exist on type 'Element'.ts(2339)

明明to是MenuItemLink的属性，而MenuItemLink是MenuItem联合类型的成员之一，为什么会触发这个错误？

原因分析 #

TypeScript的类型检查遵循严格的类型窄化规则：当访问联合类型的属性时，仅允许访问所有联合成员共有的属性。

• JSX.Element（React元素）并不包含to或label属性
• 仅用item?.to判断时，TypeScript无法自动将item的类型从MenuItem窄化为MenuItemLink——它不会基于运行时常识推断“有to属性的就一定是MenuItemLink”，必须要有明确的类型判断依据。

解决方案 #

方案1：使用类型谓词函数 #

自定义一个函数来明确判断类型，帮助TypeScript完成类型窄化：

function isMenuItemLink(item: MenuItem): item is MenuItemLink {
  return typeof item === 'object' && item !== null && 'to' in item && 'label' in item;
}

const items = menuItems.map((item, index) => {
    if (isMenuItemLink(item)) {
      return (
        <Link to={item.to} key={index}>
          <span>{item.label}</span>
        </Link>
      );
    } else {
      return item;
    }
  });

方案2：直接在条件中添加明确检查 #

在if语句里同时检查属性存在性和类型特征，让TypeScript自动窄化类型：

const items = menuItems.map((item, index) => {
    if (typeof item === 'object' && item !== null && 'to' in item && 'label' in item) {
      return (
        <Link to={item.to} key={index}>
          <span>{item.label}</span>
        </Link>
      );
    } else {
      return item;
    }
  });

方案3：给联合类型添加区分标志（推荐） #

修改类型定义，给MenuItemLink添加唯一的类型标识字段，让TypeScript能轻松识别类型：

export interface MenuItemLink {
  type: 'link'; // 添加类型区分标志
  to: string;
  label: string;
}

type MenuItem = JSX.Element | MenuItemLink;

// 使用时直接通过type字段判断
const items = menuItems.map((item, index) => {
    if ('type' in item && item.type === 'link') {
      return (
        <Link to={item.to} key={index}>
          <span>{item.label}</span>
        </Link>
      );
    } else {
      return item;
    }
  });

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