React组件联合类型适配交叉类型：类型赋值报错如何解决

你的问题核心在于TypeScript无法自动追踪联合类型中Component与props的绑定关系，导致渲染时要求props满足所有组件的交叉类型（同时有a和b属性），这显然不符合预期。下面提供两种可行的解决方案：

方案一：使用泛型约束（推荐） #

通过给UiComponent添加泛型参数，让编译器明确当前node的Component和props是一一对应的，从根源上解决类型不匹配问题：

import React from 'react';

type ComponentAProps = {
  a: string;
};

function ComponentA(props: ComponentAProps) {
  return <div>component a</div>;
}

type ComponentANode = {
  Component: typeof ComponentA;
  props: React.ComponentProps<typeof ComponentA>;
};

type ComponentBProps = {
  b: string;
};

function ComponentB(props: ComponentBProps) {
  return <div>component b</div>;
}

type ComponentBNode = {
  Component: typeof ComponentB;
  props: React.ComponentProps<typeof ComponentB>;
};

type ExampleNode = ComponentANode | ComponentBNode;

// 给参数添加泛型约束
type UiComponentArgs<T extends ExampleNode> = {
  children?: React.ReactNode;
  node: T;
};

function UiComponent<T extends ExampleNode>({ children, node }: UiComponentArgs<T>) {
  const Component = node.Component;
  const props = node.props;

  return (
    <>
      {children}
      <Component {...props} />
    </>
  );
}

// 调用示例（会自动校验props与组件的匹配性）
const TestA = () => <UiComponent node={{ Component: ComponentA, props: { a: "hello" } }} />;
const TestB = () => <UiComponent node={{ Component: ComponentB, props: { b: "world" } }} />;

方案二：使用类型守卫 #

在函数内部通过类型判断，明确当前node的具体类型，让编译器知道props对应的组件：

function UiComponent({ children, node }: UiComponentArgs) {
  // 通过props的属性判断组件类型
  if ('a' in node.props) {
    return <node.Component {...node.props} />;
  }
  // 剩余情况自动推断为ComponentBNode
  return <node.Component {...node.props} />;
}

为什么原代码会报错？ #

当node是ExampleNode联合类型时，TypeScript会将Component推断为typeof ComponentA | typeof ComponentB，props推断为ComponentAProps | ComponentBProps。但渲染时，编译器无法确定当前Component是哪一个，因此会要求props必须满足所有组件的props要求（即ComponentAProps & ComponentBProps），这就导致了"缺少属性b"或"缺少属性a"的错误。

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