React TypeScript 数组map时提示Property does not exist on type问题问询

• HomeInterface 中 data 字段被定义为宽泛的 object[] 类型，TypeScript 无法识别数组内部元素的具体属性，object 类型仅代表非原始值，不包含任何已知属性定义，因此解构时会抛出属性不存在的错误
• 泛型参数存在拼写错误：代码中写的 HomeItnerface 和你定义的接口名 HomeInterface 不匹配
• 接口定义结构错误：你把单条数据的字段（id、title、body）直接定义在了页面props的根级别，这些字段实际是data数组内单个元素的属性，不属于页面props的根属性

import type { NextPage } from "next";
// 先定义单条数据项的结构
interface PostItem {
  id?: string;
  body?: string;
  title?: string;
}
// 定义页面props的接口，data为PostItem类型的数组
export interface HomeInterface {
  data: PostItem[];
}

// 修正泛型拼写错误
const Home: NextPage<HomeInterface> = ({ data }) => {
  return (
    <div className={styles.container}>
      {data.map(({ id, title, body }) => {
        return <PostCard key={id} id={id} title={title} body={body} />;
      })}
    </div>
  );
};

如果PostCard组件也需要类型定义，你可以直接复用上面的PostItem接口作为它的props类型，避免重复定义。

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