React+TS多组件开发Props类型不匹配报错如何修复

两处报错都是同一个类型定义错误导致的：你在IssueButton组件的Props接口中，错误将dRow的类型声明为DocRow[]（DocRow类型的数组），但实际父组件通过map遍历docRow数组后，传给dRow的是单个DocRow对象，类型不匹配直接触发两个报错：

• 父组件传参报错：传入值类型为DocRow，组件期望类型为DocRow[]，因此提示传入值缺少数组的length、pop、push等内置属性
• 子组件取值报错：你在数组类型的dRow上直接访问docName属性，但数组本身不存在docName属性，只有数组内的单个元素有该属性

你不需要在IssueButton组件内额外做map遍历，修正类型定义即可解决问题。

1. 修正IssueButton组件的Props类型定义，将dRow的类型从数组改为单个DocRow对象，注意提前从对应文件引入DocRow接口：

// 替换成你实际存放DocRow接口的文件路径
import { DocRow } from '../path-to-your-type-file';

interface Props {  
  dRow: DocRow; // 移除[]，声明为单个对象类型
  policy: string;
}

2. 类型修正后，子组件内this.props.dRow.docName的访问逻辑就符合类型要求，不会再报属性不存在的错误。

你当前父组件的map逻辑存在隐患：当if判断条件不满足时，map回调会返回undefined，最终渲染的列表中会出现空值，建议先过滤符合渲染条件的项再遍历，避免渲染异常：

render() {
  return this.props.docRow
    // 先过滤出需要渲染的行
    .filter(docRow => docRow.docName === 'Cert' && !this.consentGiven(this.props.policy, docRow.docUrl))
    .map(docRow => {
      const docDateFormatted = moment(docRow.docDate, 'DDMMYYYY').format('Do MMMM YYYY');      
      return (
        <tr key={docRow.docUrl} className="document-row-disabled document-disabled">
          <td><IssueButton policy={this.props.policy} dRow={docRow} /></td>
          <td className="document-cell document-cell--name">{docRow.docName}</td>
          <td className="document-cell document-cell--data">
            <span>{docDateFormatted}</span>
            <span className="PDF-text">PDF</span>
          </td>
        </tr>
      );
  });
}

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