React+TypeScript传递Props出现ts(2322)错误，如何解决？

问题根源 #

你给Articles组件定义的props类型是单个Material对象，但父组件传的materials是**Material类型的数组**，两者类型不兼容，所以触发了ts(2322)错误。

修复步骤 #

1. 修正子组件的props类型
   需要给Articles组件的props定义一个包含data字段的类型，这个字段的类型是Material[]（即Material数组）：

   import Material from "../types/material";
   
   // 定义Articles组件的props类型
   type ArticlesProps = {
     data: Material[];
   };
   
   const Articles = (props: ArticlesProps) => {
     console.log(props.data); // 现在可以正确拿到数组数据
     return (
       <div className="articles-container">
         {/* 遍历渲染每个素材项 */}
         {props.data.map((material, index) => (
           <article key={index} className="article-item">
             <h2>{material.title}</h2>
             <p>{material.body}</p>
             <a href={material.href} target="_blank" rel="noopener noreferrer">
               Перейти до джерела
             </a>
           </article>
         ))}
       </div>
     );
   };
   
   export default Articles;
   

2. 验证父组件的传递逻辑
   父组件Main里的<Articles data={materials} />写法没问题，只要子组件的props类型修正后，TypeScript就会认可这个传递，错误自然消失。

额外提示 #

• 渲染数组时一定要给每个子元素加唯一的key属性，这里用index是临时方案，最好用数据中唯一的标识（比如如果Material有id字段就用id）。
• 如果不想单独定义ArticlesProps，也可以直接用匿名类型：const Articles = (props: { data: Material[] }) => {...}

内容的提问来源于stack exchange，提问作者antonkornilov-ua