React中Discriminative Union失效，组件无渲染的问题排查

问题成因 #

1. 类型引用错误：TopicProp中使用了未定义的TopicType，实际定义的类型是Topic，这会导致TypeScript类型检查报错，影响组件正常编译。
2. 组件与类型同名冲突：自定义组件Topic和类型Topic重名，React在解析JSX时会出现识别混淆，同时违反了组件与类型的命名规范。
3. 拼写不一致：Assessment接口的type字段拼写为"assesment"（正确应为"assessment"），若后续传入数据的type是正确拼写，会直接导致类型收窄逻辑失效。
4. 未传入有效Props：如果使用组件时没有传递topic属性，topic会是undefined，此时组件虽会返回"Assesment"的div，但如果期望渲染对应类型的内容，未传值会导致不符合预期的结果。

解决方法 #

1. 修正类型引用错误 #

将TopicProp中的TopicType替换为实际定义的Topic类型：

type TopicProp = {
  topic?: Assessment | Topic;
};

2. 避免组件与类型同名 #

重命名组件（推荐组件名更具语义化），比如改为TopicItem：

const TopicItem = ({ topic }: TopicProp) => {
  if (topic?.type === "topic") {
    return (
      <div>
        <h1>TOPIC</h1>
      </div>
    );
  }
  return (
    <div>
      <h1>Assessment</h1>
    </div>
  )
};

3. 统一type字段拼写 #

修正Assessment接口的type拼写，并确保组件内的判断逻辑一致：

export interface Assessment {
  type: "assessment"; // 修正拼写
  id: number;
  name: string;
  pre_assesment: boolean;
  order: number;
  max_marks: number;
  min_marks_to_qualify: number;
  course: number;
  topic: number;
  parent: number;
  question: Question[];
}

// 组件内补充明确判断，处理undefined情况
const TopicItem = ({ topic }: TopicProp) => {
  if (topic?.type === "topic") {
    return <div><h1>TOPIC</h1></div>;
  } else if (topic?.type === "assessment") {
    return <div><h1>Assessment</h1></div>;
  }
  return <div>No content</div>;
};

4. 确保传入有效Props #

使用组件时传递符合类型定义的topic数据，示例：

// 传入Topic类型数据
<TopicItem topic={{
  type: "topic",
  id: 1,
  name: "React Hooks",
  info_image: "hooks.png"
}} />

// 传入Assessment类型数据
<TopicItem topic={{
  type: "assessment",
  id: 2,
  name: "Hooks 测试",
  pre_assesment: false,
  order: 1,
  max_marks: 100,
  min_marks_to_qualify: 60,
  course: 1,
  topic: 1,
  parent: 0,
  question: []
}} />

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