React TypeScript：子组件内未定义变量的类型断言问题

我有如下代码：

<Show when={!!icon} fallback={<SVG src={defaultIcon}/>}>
     <SVG src={icon!} className={styles.buttonIcon} />
</Show>

由于icon可能为undefined，我用自定义Show组件对SVG进行包裹，但TypeScript仍认为子组件内的icon可能未定义，尽管只有当icon存在时才会渲染该子组件。请问如何让TypeScript识别Show组件内的icon已定义？

我知道使用

<SVG src={icon ?? defaultIcon} className={styles.buttonIcon} />

的方式更适合该场景，但在一些更复杂的场景中，我希望使用这个自定义的Show组件。

要让TypeScript识别Show组件内部的icon已定义，核心是给自定义Show组件添加精准的类型约束，让TypeScript能根据when的条件自动推断子组件渲染时的上下文类型。

1. 为Show组件添加泛型类型定义 #

修改Show组件的类型，利用泛型关联when条件和子组件的参数类型：

import type { ReactNode } from 'react';

type ShowProps<T> = {
  // when可以是任意值，TypeScript会推断其类型
  when: T;
  fallback: ReactNode;
  // 仅当when为真时，子组件函数接收非空的上下文参数
  children: (context: T extends true | NonNullable<infer U> ? U : T) => ReactNode;
};

export function Show<T>({ when, fallback, children }: ShowProps<T>) {
  return when != null && Boolean(when) 
    ? children(when as T extends true | NonNullable<infer U> ? U : T) 
    : fallback;
}

2. 以函数式子组件方式使用 #

将子组件改为函数形式，让TypeScript通过泛型推断自动识别when为真时的类型：

<Show when={icon} fallback={<SVG src={defaultIcon}/>}>
  {(iconValue) => {
    // iconValue的类型自动推导为string（排除undefined）
    return <SVG src={iconValue} className={styles.buttonIcon} />;
  }}
</Show>

如果你的when条件是!!icon（布尔值），也可以这样用：

<Show when={!!icon} fallback={<SVG src={defaultIcon}/>}>
  {(isIconPresent) => {
    // isIconPresent类型为true，TypeScript会知晓icon已存在
    return <SVG src={icon} className={styles.buttonIcon} />;
  }}
</Show>

3. 原理说明 #

通过泛型参数T捕获when的类型，再利用条件类型T extends true | NonNullable<infer U> ? U : T，让TypeScript在when为真时，自动将子组件参数的类型缩小为非空值。这样就不需要手动添加!非空断言，TypeScript能准确识别组件内部的变量状态。

这种方式保留了Show组件在复杂场景下的灵活性，比如需要渲染多个依赖同一条件的组件时，能统一管理类型约束。

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