TS2740报错：传入TweetList的tweets参数缺少postType[]数组属性如何解决

错误原因 #

你的TweetList组件接收的tweets属性期望类型为postType[]（postType类型的数组），但你传入的placeholder是一个外层包裹了tweets字段的对象，且对象内的tweets是单个postType类型的对象而非数组，类型完全不匹配，因此触发TS2740报错。

解决方案 #

以下两种修改方案二选一即可：

方案1：调整placeholder为数组结构 #

直接将placeholder定义为postType数组，适配组件入参要求：

// home.ts
import TweetList from '../../components/PostBox/TweetList';
import { postType } from '../../components/PostBox/types/TweetInterface';

function Home() {
  // 直接定义为postType数组
  const placeholder: postType[] = [
    {
      posterId: "abcd",
      username: "@abcd",
      postText: "abcdefgh",
      encryptedText: "abcd",
      iv: "abcd",
      locks: ["a", "b"],
      taggedUsers: ["c", "d"]
    }
  ];

  return (
    <div>
      <NewTweetForm newTweetInput={undefined} handleNewTweet={undefined} handleSubmit={undefined} />
      <TweetList tweets={placeholder} />
    </div>
  );
}

export default Home;

方案2：保留嵌套结构，修改取值逻辑 #

如果需要保留原有的对象嵌套结构，就将内层的tweets改为数组，传参时取对应的字段：

// home.ts
import TweetList from '../../components/PostBox/TweetList';
import { postType } from '../../components/PostBox/types/TweetInterface';

function Home() {
  const placeholder = {
    // 内层tweets改为数组
    tweets: [
      {
        posterId: "abcd",
        username: "@abcd",
        postText: "abcdefgh",
        encryptedText: "abcd",
        iv: "abcd",
        locks: ["a", "b"],
        taggedUsers: ["c", "d"]
      }
    ]
  };

  return (
    <div>
      <NewTweetForm newTweetInput={undefined} handleNewTweet={undefined} handleSubmit={undefined} />
      {/* 取placeholder的tweets属性传入 */}
      <TweetList tweets={placeholder.tweets} />
    </div>
  );
}

export default Home;

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