使用Angular与AngularFire2运行报错：Property 'service'不存在于类型'{}'

这个问题本质是TypeScript静态类型检查和Firestore返回数据的动态结构不匹配导致的。虽然运行时你的代码能正常获取到response.service，但TypeScript默认认为valueChanges()返回的是Observable<{}>（空对象类型），所以编译时会报错提示找不到service属性。你的临时解决办法有效，是因为热重载时TypeScript的类型检查逻辑临时放松了，但这显然不是长久之计，下面给出两种可靠的解决方案：

方案一：定义文档结构接口（推荐） #

为Firestore返回的文档数据定义明确的TypeScript接口，让TypeScript清楚知道数据的结构：

// 先定义描述文档结构的接口，根据你实际的service字段结构调整类型
interface ServiceCategoryDoc {
  service: Record<string, CategoryType>; // 这里的CategoryType可以是你自定义的分类类型，比如{ name: string; ... }
}

// 如果你还没定义CategoryType，也可以先用any过渡，之后再细化
// interface ServiceCategoryDoc {
//   service: any;
// }

然后在调用doc()方法时指定泛型类型，这样valueChanges()就会返回对应类型的Observable：

private afs: AngularFirestore;

// ...

this.afs.doc<ServiceCategoryDoc>('service/' + res.category).valueChanges().subscribe((response) => {
  this.categories = Object.values(response.service);
});

方案二：使用类型断言（快速临时修复） #

如果暂时不想定义完整的接口，可以用类型断言告诉TypeScriptresponse的实际类型：

this.afs.doc('service/' + res.category).valueChanges().subscribe((response) => {
  // 断言response为包含service属性的对象
  const typedResponse = response as { service: any };
  this.categories = Object.values(typedResponse.service);
});

不过这种方式跳过了TypeScript的类型检查，不如方案一严谨，建议后续还是补充完整的类型定义。

为什么你的临时办法有效？ #

当你删除.service再恢复时，Angular的热重载会重新编译代码。这个过程中，TypeScript可能会临时放宽对未明确类型变量的检查，或者因为代码变动触发了更宽松的类型推断，从而绕过了编译错误。但这只是权宜之计，核心问题还是缺少明确的类型定义。

内容的提问来源于stack exchange，提问作者Carlos Uriel Santiago