Firestore数据转换：如何将动态Price字段转为Map<string,number>

问题背景 #

从Firestore获取的业务数据结构如下：

{"workingDays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Saturday"],"logo":"https://firebasestorage.googleapis.com/v0/b/jameel-a59bf.appspot.com/o/providers%2F17hELzdI9cf25ouMPQIe%2F708B4FEC-4E3E-43F6-8383-45164E09B851.png?alt=media&token=2adb93f7-d94c-4179-bd78-0b34652a9766","workingHours":["9:00AM","10:00AM","11:00AM","12:00PM","1:00PM","2:00PM","1:00AM"],"name":"DTOX Car Service Dpulze Cyberjaya","services":[{"id":"carCleaning","price":{"Sedan":10, "SUV":20, "SUVXXL":30}}],"address":"High St, Biggar ML12 6BJ, United Kingdom","location":{"_latitude":55.62360289999999,"_longitude":-3.5256982}}

其中services数组里的price字段键是动态可扩展的，无法用固定字段的Price接口定义，需要转为Map<string, number>类型，但直接转换失败。

解决方案 #

1. 定义支持动态键的TypeScript接口

Firestore返回的price是普通JSON对象，先通过索引签名或Record<string, number>定义接口，确保TypeScript能正确识别结构：

// 服务项接口：用索引签名支持动态键的price字段
interface Service {
  id: string;
  price: { [key: string]: number }; // 索引签名写法
  // 也可以用Record简化：price: Record<string, number>
}

// 完整业务数据接口
interface BusinessData {
  workingDays: string[];
  logo: string;
  workingHours: string[];
  name: string;
  services: Service[];
  address: string;
  location: {
    _latitude: number;
    _longitude: number;
  };
}

2. 将Firestore返回的对象转为Map<string, number>

Firestore返回的是普通JS对象，不是Map实例，必须手动转换。可以写一个工具函数完成转换：

// 工具函数：把动态键对象转为Map实例
function objectToMap(obj: { [key: string]: number }): Map<string, number> {
  return new Map(Object.entries(obj));
}

// 使用示例：假设从Firestore获取到原始数据rawData
const rawData = await firestore.collection('businesses').doc('目标文档ID').get();
const businessData: BusinessData = rawData.data() as BusinessData;

// 转换所有服务项的price为Map
const processedServices = businessData.services.map(service => ({
  ...service,
  price: objectToMap(service.price)
}));

3. 直接定义带Map的接口（可选）

如果希望接口中price直接是Map类型，可以在转换数据时一步到位：

interface ServiceWithMap {
  id: string;
  price: Map<string, number>;
}

// 转换并适配新接口
const businessWithMapPrices = {
  ...businessData,
  services: businessData.services.map(s => ({
    id: s.id,
    price: new Map(Object.entries(s.price))
  }))
} as Omit<BusinessData, 'services'> & { services: ServiceWithMap[] };

关键说明 #

• TypeScript的Map是运行时实例类型，Firestore返回的JSON对象无法自动转为Map，必须通过Object.entries()手动转换。
• 索引签名或Record<string, number>的作用是告诉TypeScript：该对象的键为字符串、值为数字，支持任意动态键，避免类型报错。

内容的提问来源于stack exchange，提问作者Abd El Rahman Aymen