如何在TypeScript中映射JSON对象内的数组？解决map读取报错

问题根源 #

你碰到的Cannot read properties of undefined (reading 'map')错误，本质是三处不匹配导致的：

• API返回的是外层带project字段的对象，并非直接的项目数组
• 组件Props类型定义错误，写成了Project[]数组类型，但实际传入的是整个API返回的对象
• 调用projects.project.map时，projects被错误定义为数组类型，运行时自然找不到project属性

修正步骤 #

1. 修正Props类型定义 #

先把Props改成匹配API返回的结构：

// 先确保已有Project类型定义
type Project = {
  _createdAt: string;
  _id: string;
  _rev: string;
  _type: string;
  _updatedAt: string;
  image: Record<string, any>; // 可根据实际结构替换为更具体的类型
  linkToBuild: string;
  summary: string;
  technologies: string[]; // 可根据实际结构调整类型
  title: string;
};

// 修正Props为包含project数组的对象类型
type Props = {
  projects: {
    project: Project[];
  };
};

2. 正确调用map并添加空值保护 #

在组件里正确访问projects.project，同时加上可选链和空数组兜底，避免数据未加载时触发报错：

function Projects({ projects }: Props) {
  return (
    <div className="projects-container">
      {/* 用可选链+空数组兜底，防止数据未返回时报错 */}
      {projects.project?.map((project, i) => (
        <div key={project._id} className="project-card">
          <h3>{project.title}</h3>
          <p>{project.summary}</p>
          <a href={project.linkToBuild} target="_blank" rel="noopener noreferrer">
            查看项目
          </a>
        </div>
      )) || <p>加载中...</p>}
    </div>
  );
}

3. 确认组件传参正确 #

确保父组件传入的是完整的API返回对象，而非只传数组：

// 父组件示例（假设已获取API数据）
const apiData = await fetchProjects(); // 返回结构为{ project: Project[] }

// 正确传参
<Projects projects={apiData} />

额外场景处理 #

如果父组件已经把API返回的project数组解构出来了，那Props类型要改回Project[]，同时组件里直接用projects.map：

// 父组件解构后传参
const { project } = await fetchProjects();
<Projects projects={project} />

// 此时组件的Props和调用方式
type Props = {
  projects: Project[];
};

function Projects({ projects }: Props) {
  return (
    <div>
      {projects.map((project, i) => (
        // ...项目卡片渲染逻辑
      ))}
    </div>
  );
}

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