如何让TypeScript识别React组件中的联合类型分支？

DevOps 小满

2026-6-22

解决TypeScript联合类型在Switch中的类型收窄问题

针对你的场景，TypeScript报错是因为它无法确定switch的每个分支已经覆盖了CartItem联合类型的所有可能，因此没有正确将item收窄到对应的子类型。可以通过以下两种方式解决：

方法一：添加穷尽检查的Default分支（推荐）

在switch中加入default分支，通过never类型断言确保所有联合类型都被处理，同时让TypeScript明确每个case对应的子类型：

const items = getCartItems(...)

<div>
    {items.map(item => {
        switch(item.type) {
            case 'regular': 
                return (<div>Weight: {item.weight}</div>)
            case 'bulk': 
                return (<div>Tonnage: {item.tonnage}</div>)
            default:
                // 穷尽检查：若新增CartItem子类型未处理，此处会编译报错
                const _unhandledItem: never = item;
                throw new Error(`未处理的商品类型：${_unhandledItem.type}`);
        }
    })}
</div>

这个方法的优势在于，后续如果扩展CartItem的子类型（比如新增SpecialItem），只要忘记在switch中添加对应的case，TypeScript就会在_unhandledItem处抛出编译错误，避免遗漏处理逻辑。

方法二：类型断言（不推荐，仅临时应急）

如果不想添加default分支，可以在每个case中手动用类型断言指定item的子类型，但这种方式不安全，后续扩展类型时容易出现遗漏：

const items = getCartItems(...)

<div>
    {items.map(item => {
        switch(item.type) {
            case 'regular': 
                return (<div>Weight: {(item as RegularItem).weight}</div>)
            case 'bulk': 
                return (<div>Tonnage: {(item as BulkItem).tonnage}</div>)
        }
    })}
</div>