使用Firebase的object.$key路由时返回undefined问题求助

我之前也踩过这个坑！你遇到的$key返回undefined的问题，大概率是Firebase/AngularFire版本迭代带来的写法变更，或者数据获取时没正确包含文档ID导致的，咱们一步步来解决：

核心原因分析 #

旧版Firebase实时数据库的Angular封装里，会自动给返回的对象附加$key属性，但在较新的AngularFire版本（比如5.x+）或者Firebase 9+模块化SDK中，这个属性已经被废弃了，需要手动指定或提取文档ID。

具体解决方案 #

根据你代码里的products$ | async，我分两种常见场景给你调整方案：

1. 用valueChanges()获取数据（简洁版）

如果你的products$是通过list()的valueChanges()定义的，默认不会返回文档ID，需要添加idField参数指定字段名：

// 原来的错误写法（无ID）
// this.products$ = this.db.list('/products').valueChanges();

// 修改后的正确写法
this.products$ = this.db.list('/products').valueChanges({ idField: 'key' });

之后在模板里就可以用{{ p.key }}替代原来的p.$key，路由链接也改成：

<a [routerLink]="['/your-route-path', p.key]">跳转</a>

2. 用snapshotChanges()获取数据（更灵活，支持元数据）

如果需要获取更多数据快照的元信息，可以用snapshotChanges()手动提取ID：

this.products$ = this.db.list('/products').snapshotChanges().pipe(
  map(changes => 
    changes.map(item => ({
      key: item.payload.key, // 提取文档ID
      ...item.payload.val()  // 合并原数据
    }))
  )
);

模板里同样用p.key来获取ID值。

调整后的完整模板示例 #

结合你给出的代码片段，修改后应该是这样：

<table class="table">
  <thead>
    <tr>
      <th>Title</th>
      <th>Price</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let p of products$ | async">
      <td>{{ p.title }}</td>
      <td>{{ p.price }}</td>
      <td>
        <a [routerLink]="['/product-detail', p.key]">查看详情</a>
      </td>
    </tr>
  </tbody>
</table>

额外提醒 #

如果是刚升级了Firebase或AngularFire版本，一定要同步看最新官方文档的写法，旧的$key属性已经被彻底移除，这就是它返回undefined的根本原因。

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