Next.js + TypeScript 传递IQuote数组组件时出现IntrinsicAttributes类型不兼容错误

兄弟，我来帮你捋捋这个问题哈。你现在遇到的这个类型错误，核心问题出在组件的Props类型定义错了，咱们一步一步来拆解：

问题根源 #

你定义了interface IQuoteList extends Array<IQuote>{}，然后把UncompletedQuotes的FC泛型设成了IQuoteList——这相当于告诉TypeScript：这个组件接收的props本身就是一个IQuote数组。但实际上，你在父组件里是通过quotes={clientQuotes}传递参数的，组件接收的props是一个包含quotes属性的对象，而不是直接接收数组本身。这就导致了类型不匹配，TypeScript自然报错说quotes属性不存在于IQuoteList类型上，而你console.log出来的{quotes: [...]}结果也完全验证了这一点。

解决方案 #

咱们只需要修正组件的类型定义，让它正确描述props的结构就行：

1. 重新定义组件的Props接口
   专门写一个接口来描述组件接收的参数，明确包含quotes属性，类型是IQuote[]：

   interface UncompletedQuotesProps {
     quotes: IQuote[];
   }
   

2. 修正组件的类型声明与参数接收
   把FC的泛型换成上面的Props接口，然后通过解构或者直接访问props对象拿到数组：
   推荐用解构的方式（更清晰）：

   const UncompletedQuotes: FC<UncompletedQuotesProps> = ({ quotes }) => {
     console.log(quotes); // 这里直接拿到的就是IQuote数组了
     return (
       <section>
         {/* 这里写你的组件内容 */}
       </section>
     );
   };
   

   如果不习惯解构，也可以直接用props对象：

   const UncompletedQuotes: FC<UncompletedQuotesProps> = (props) => {
     console.log(props.quotes);
     return (
       <section>
         {/* 这里写你的组件内容 */}
       </section>
     );
   };
   

3. 删除无用的IQuoteList接口
   那个继承Array的接口完全没必要，直接用IQuote[]就可以表示IQuote数组类型，留着反而容易混淆，直接删掉就行。

总结一下 #

React组件的props本质上都是一个对象，哪怕你只传递一个属性，也得用对象类型来描述它的结构。之前的错误就是把props的类型当成了数组本身，现在修正后类型匹配了，错误自然就消失啦。

备注：内容来源于stack exchange，提问作者daniel sas