React+TypeScript：根据组件Props条件限制Render Prop注入参数类型

要实现当未传入someProp时禁止访问param2的类型约束，核心是通过TypeScript的联合类型条件分支，将someProp的存在与否与Render Prop的参数类型做关联绑定。

具体实现方案 #

我们可以把组件的Props拆分为两个互斥的类型分支：

1. 当传入someProp时，Render Prop的参数包含param1和param2
2. 当未传入someProp时，Render Prop的参数仅包含param1

完整代码示例

import React, { ReactElement } from 'react';

interface Test {
  test: string;
}

// 定义两种Render参数类型
type BaseRenderParams = { param1: boolean };
type FullRenderParams = BaseRenderParams & { param2: string };

// 定义互斥的Props联合类型
type ComponentProps =
  | {
      someProp: Test;
      children: (params: FullRenderParams) => ReactElement;
    }
  | {
      someProp?: never; // 明确标记未传入时的类型为never，排除模糊性
      children: (params: BaseRenderParams) => ReactElement;
    };

const Component = ({ someProp, children }: ComponentProps) => {
  // 运行时始终传入完整参数，但类型系统会根据Props分支限制访问权限
  return children({
    param1: false,
    param2: 'test',
  } as typeof children extends (p: infer P) => any ? P : never);
};

验证约束效果 #

1. 无效用法（会触发TypeScript错误）

// 未传入someProp却访问param2，类型检查报错
const instance = <Component>
  {({ param1, param2 }) => <div>{param2}</div>}
</Component>

错误提示类似：Property 'param2' does not exist on type 'BaseRenderParams'

2. 有效用法1：未传入someProp，仅使用param1

<Component>
  {({ param1 }) => <div>static text</div>}
</Component>

类型检查通过，无报错。

3. 有效用法2：传入someProp，可使用param1和param2

<Component someProp={{ test: 'demo' }}>
  {({ param1, param2 }) => <div>{param2}</div>}
</Component>

类型检查通过，无报错。

关键细节说明 #

• 使用someProp?: never是为了明确标记“未传入someProp”的分支，避免TypeScript将其与传入undefined的情况混淆，确保类型分支的互斥性。
• 组件内部的类型断言as typeof children extends (p: infer P) => any ? P : never是为了让TypeScript自动推导当前Props分支对应的Render参数类型，避免手动断言带来的类型不安全。

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