TypeScript父子组件传参报错求助：类型不兼容问题排查

你的报错核心是父组件传递给子组件的props结构和子组件定义的Props类型不匹配：子组件MailRow的Props要求接收一个名为item的MailRowType对象，但父组件直接把name、title、icon作为单独属性传递，TypeScript判定类型不兼容。

下面提供两种可行的解决方式：

方案一：修改父组件，传递完整的item对象 #

将所有属性打包成item对象传递给子组件，注意要补全MailRowType定义的所有必填属性（比如description和time，否则会触发新的类型错误）：

// 父组件代码
export type MailRowType = {
  icon: any,
  name: string,
  title: string,
  description: string,
  time: number,
}

const Inbox = () => {
  return (
    <div>
      <MailRow 
        item={{
          name: "Emmanuel uzoezie",
          title: "JavaScript",
          icon: <StarBorderIcon />,
          description: "示例邮件描述",
          time: Date.now()
        }} 
      />
    </div>
  )
}

子组件代码无需修改，保持原有逻辑即可。

方案二：修改子组件的Props类型，直接接收属性 #

如果不想用item嵌套传递，直接让子组件接收MailRowType的所有属性：

// 子组件代码
import { MailRowType } from './Inbox'; // 确保导入父组件的类型定义

const MailRow: React.FC<MailRowType> = ({ name, icon, title }) => {
  return (
    <div>
      <h2>{name}</h2>
      <span>{icon}</span>
      <h4>{title}</h4>
    </div>
  )
}

此时父组件的传递方式可以保持不变，但同样需要补全MailRowType要求的description和time属性：

// 父组件修改后
const Inbox = () => {
  return (
    <div>
      <MailRow 
        name="Emmanuel uzoezie" 
        title="JavaScript" 
        icon={<StarBorderIcon />}
        description="示例邮件描述"
        time={1720000000}
      />
    </div>
  )
}

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