如何在React父组件中为子组件断言Prop类型？TypeScript场景

完全可以实现这个需求，核心是利用TypeScript的泛型、条件类型和函数式children（渲染props）来传递类型推断结果，无需手动断言。

实现思路 #

通过让NotFound组件接收待判断的变量和判断条件，同时将children设计为函数形式，让TypeScript根据条件的真假自动缩小变量的类型范围，传递给子组件使用。

完整代码实现 #

import React from 'react';

// 定义泛型Props：
// - T 代表变量的原始类型（例如 Product | null）
// - IsTrue 标记判断条件是否为true，用于推导子组件接收的类型
type NotFoundProps<T, IsTrue extends boolean> = {
  // 待判断的变量
  value: IsTrue extends true ? NonNullable<T> : T;
  // 判断条件，类型会关联到IsTrue泛型
  if: IsTrue;
  // 当条件为true时，子组件接收非null的T类型；条件为false时不允许传入子组件
  children: IsTrue extends true ? (val: NonNullable<T>) => React.ReactNode : never;
  // 可选的兜底组件，默认显示通用提示
  fallback?: React.ReactNode;
};

// 用函数重载处理条件真假两种情况，帮助TypeScript做类型推断
function NotFound<T>(props: NotFoundProps<T, false>): React.ReactNode;
function NotFound<T>(props: NotFoundProps<T, true>): React.ReactNode;
function NotFound<T>(props: any): React.ReactNode {
  if (props.if) {
    return <>{props.children(props.value)}</>;
  }
  // 条件为false时渲染兜底组件
  return <>{props.fallback ?? <div>页面未找到，请检查路径或资源</div>}</>;
}

使用示例 #

假设你有一个可能为null的product变量，使用方式如下：

// 定义Product类型
type Product = { id: number; name: string; price: number };

function ProductPage() {
  // 模拟可能为null的product数据
  const product: Product | null = Math.random() > 0.5 
    ? { id: 1, name: "无线耳机", price: 299 } 
    : null;

  return (
    <NotFound
      value={product}
      // 传入判断条件，TypeScript会自动关联类型
      if={product != null}
    >
      {/* 这里的product自动推断为非null的Product类型，无需!断言 */}
      {(product) => (
        <div className="product-card">
          <h2>{product.name}</h2>
          <p>价格：¥{product.price}</p>
          <p>ID：{product.id}</p>
        </div>
      )}
      {/* 可选自定义兜底组件 */}
      fallback={<div>未找到该商品，请返回首页</div>}
    </NotFound>
  );
}

原理说明 #

1. 泛型与条件类型：通过IsTrue泛型标记条件的真假，结合NonNullable<T>工具类型，自动推导子组件接收的变量类型。
2. 函数重载：帮助TypeScript区分条件真假两种场景，确保只有条件为true时才能传入子组件函数，避免类型错误。
3. 函数式children：将子组件设计为函数，让TypeScript能直接把缩小后的类型传递给函数参数，实现自动类型推断。

如果你之前尝试自定义断言函数失败，大概率是没有将断言逻辑和组件的泛型、条件类型结合起来——这种函数式children的方式更贴合React组件的使用习惯，也能完美实现类型自动缩小的需求。

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