如何为包含嵌套/映射对象的React函数添加TypeScript类型？

1. 按嵌套结构定义类型接口 #

根据组件用到的嵌套数据结构，从最内层开始逐层定义接口，确保每个属性都有明确类型：

// 定义导航项的核心属性接口
interface MenuItemPrimary {
  menu_item_label: string;
  // 若使用Prismic官方类型包，可替换为 PrismicLinkField
  menu_item_link: {
    url: string;
    // 可根据Prismic返回的实际字段补充target、type等属性
  };
}

// 定义单个切片的接口
interface NavigationSlice {
  id: string;
  primary: MenuItemPrimary;
}

// 定义导航数据的接口
interface NavigationData {
  slices: NavigationSlice[];
}

// 定义组件Props的接口
interface NavigationProps {
  navigation: {
    data: NavigationData;
  };
}

2. 为组件和map函数添加类型约束 #

将组件的props指定为NavigationProps，同时给map循环变量明确类型：

import { PrismicLink } from '@prismicio/react';

export function Navigation({ navigation }: NavigationProps) {
  return (
    <nav>
      <ul>
        {navigation.data.slices.map((slice: NavigationSlice) => (
          <li key={slice.id}>
            <PrismicLink field={slice.primary.menu_item_link}>
              {slice.primary.menu_item_label}
            </PrismicLink>
          </li>
        ))}
      </ul>
    </nav>
  );
}

额外说明 #

• 若项目已安装@prismicio/types，可直接复用Prismic内置类型（如PrismicLinkField），无需自行定义链接结构，能更精准匹配Prismic返回的数据格式。
• 逐层定义接口的好处是结构清晰，后续数据结构变更时，只需修改对应层级的接口即可，维护成本更低。

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