React-TypeScript中双类型数组映射报错的解决方案咨询

问题原因 #

你遇到的TypeScript错误源于：

• TypeScript无法通过option[0].hasOwnProperty("name")推断整个数组的类型，map时每个val仍被视为string | Options，因此访问val.name会报错；
• Options类型对象不能直接作为React子节点，只有string可以，所以直接传递val会触发类型不兼容错误。

解决方案 #

使用**类型守卫（Type Predicates）**来明确数组或元素的类型，让TypeScript正确推断类型。

方法1：针对单个元素的类型守卫 #

创建函数判断单个元素是否为Options类型，在map时逐个判断：

import React from 'react';

interface Options {
    name: string;
}

interface Props {
    option: Options[] | string[];
}

// 类型守卫：判断元素是否为Options类型
function isOption(item: string | Options): item is Options {
    return typeof item !== 'string' && 'name' in item;
}

const MapOfArrayHavingTwoDifferentTypes: React.FC<Props> = ({ option }) => {
    return (
        <>
            {option.map((val, index) => (
                <p key={index}>
                    {isOption(val) ? val.name : val}
                </p>
            ))}
        </>
    );
};

export default MapOfArrayHavingTwoDifferentTypes;

方法2：针对整个数组的类型守卫 #

先判断整个数组的类型，再分别处理两种数组的映射逻辑：

import React from 'react';

interface Options {
    name: string;
}

interface Props {
    option: Options[] | string[];
}

// 类型守卫：判断数组是否为Options[]类型
function isOptionsArray(arr: Options[] | string[]): arr is Options[] {
    return arr.length > 0 && typeof arr[0] !== 'string' && 'name' in arr[0];
}

const MapOfArrayHavingTwoDifferentTypes: React.FC<Props> = ({ option }) => {
    if (isOptionsArray(option)) {
        return (
            <>
                {option.map((val, index) => (
                    <p key={index}>{val.name}</p>
                ))}
            </>
        );
    }

    return (
        <>
            {option.map((val, index) => (
                <p key={index}>{val}</p>
            ))}
        </>
    );
};

export default MapOfArrayHavingTwoDifferentTypes;

补充说明 #

• 给map的元素加上key属性，符合React列表渲染规范；
• 将原接口名arr改为Props，更符合React组件属性的命名习惯；
• 空数组情况下，两种方法都会渲染空内容，若需要提示，可以添加额外判断：

  if (option.length === 0) {
      return <p>No items available</p>;
  }
  

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