打字稿错误：不可分配给类型“IntrinsicAttributes”

Question

我已经创建了这个 TSX 组件并且遇到了错误。

function FeedMain() {
  const posts = [
    {
      id: "123",
      username: "danieljames",
      userImg:
        "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/768px-Instagram_logo_2016.svg.png",
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/768px-Instagram_logo_2016.svg.png",
      caption: "This is AWWESOME",
    },
  ];
  return (
    <>
      <div>
        {posts.map((post) => (
          <>
            <FeedPost key={post.id} id={post.id}/>
          </>
        ))}
      </div>
    </>
  );
}

export default FeedMain;

错误是：

Type '{ key: string; id: string; }' is not assignable to type 'IntrinsicAttributes'. Property 'id' does not exist on type 'IntrinsicAttributes'.

FeedPost:

function FeedPost({ key, id }) {
  return (
    <>
      <h1 key={key}>{id}</h1>
    </>
  );
}

export default FeedPost;

我不确定如何更改打字，以便打字稿与映射方法一起使用。 发生的错误是类型“{}”缺少类型“{ key:any;”中的以下属性。 身份证：任何； }'：键，ID

我想我需要让打字更具体，但我只是不确定如何去做，因为我是新手。 任何建议都会受到欢迎！

有没有人有什么建议！