TypeScript组件传参报错：{ flag: boolean; }类型不匹配指定类型

这个错误的核心原因是Cards组件的类型定义与你传递参数的方式不匹配：你传递的是一个包含flag属性的对象，但组件期望直接接收一个boolean类型的值。

解决方案分两种情况： #

情况1：让Cards组件接收命名props（推荐写法）

修改Cards组件的类型定义，明确它接受一个包含flag属性的props对象——这是React组件的常规写法，扩展性更强：

// Cards组件的代码
interface CardsProps {
  flag: boolean;
}

export default function Cards({ flag }: CardsProps) {
  // 组件内部逻辑
  return <div>{flag ? "内容已显示" : "内容未显示"}</div>;
}

调整后你原来的<Cards flag={flag}/>调用方式就完全符合类型要求了。

情况2：保持Cards组件接收boolean原始值（不推荐）

如果确实需要组件直接接收boolean值，要调整参数传递方式，直接传入值而非对象：

// 在MyProject组件中调用Cards
<Cards>{flag}</Cards>

同时确保Cards组件的定义对应：

// Cards组件的代码
export default function Cards(flag: boolean) {
  // 组件内部逻辑
  return <div>{flag ? "内容已显示" : "内容未显示"}</div>;
}

作为TypeScript初学者，优先选择第一种方案，因为它更符合React的组件设计规范，后续添加新的props也更方便。

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