Angular 8中传入ID从Firebase获取元素返回空值问题排查

你现在拿到的{"type":"value","payload":null,"key":null}是Firebase snapshotChanges()返回的Action对象，但里面的payload为null通常有几个核心原因：

• 数据库中不存在对应ID的节点，或者路径拼写错误
• Firebase安全规则限制了数据读取权限
• 没有正确从Action对象中提取实际的业务数据

1. 先确认数据库路径与传入ID的正确性 #

你的服务中路径是/table' + tableid，比如如果传入的ID是123，最终路径会是/table123。但通常我们会用复数节点存储多个对象（比如/tables/123），先检查你的Firebase Realtime Database节点结构：

• 如果数据存在tables节点下，修改服务的路径：

get(tableid){
  return this.db.object(`/tables/${tableid}`).snapshotChanges();
}

• 同时在组件里确认传入的id值是否有效：

if (id) {
  console.log("传入的目标ID：", id); // 检查ID是否为空或错误值
  this.productService.get(id).subscribe(...)
}

2. 正确提取snapshotChanges()中的业务数据 #

snapshotChanges()返回的不是直接的业务数据，而是包含动作类型、快照信息的Action对象，你需要从payload中提取实际数据：

方式一：组件内直接处理（快速测试） #

修改组件的订阅逻辑：

if (id) {
  this.productService.get(id).subscribe(action => {
    // 从payload快照中提取实际数据
    const tableData = action.payload.val();
    // 如果需要节点的唯一key，可以用action.payload.key
    const tableKey = action.payload.key;
    
    this.table = tableData;
    console.log("从Firebase获取的数据：", JSON.stringify(this.table));
    console.log("数据节点的Key：", tableKey);
  });
}

方式二：服务中预处理数据（推荐，复用性更高） #

让服务直接返回可用的数据对象，组件无需重复处理Action：

// 服务代码，记得导入rxjs的map操作符
import { map } from 'rxjs/operators';

get(tableid){
  return this.db.object(`/tables/${tableid}`).snapshotChanges().pipe(
    map(action => {
      const data = action.payload.val();
      const key = action.payload.key;
      // 合并key与数据，返回null如果节点不存在
      return data ? { key, ...data } : null;
    })
  );
}

// 组件代码
if (id) {
  this.productService.get(id).subscribe(res => {
    this.table = res;
    console.log("从Firebase获取的数据：", JSON.stringify(this.table));
  });
}

3. 检查Firebase安全规则 #

如果路径和ID都没问题但仍返回null，大概率是规则限制了读取权限。可以暂时修改规则测试：
登录Firebase控制台，进入Realtime Database的规则标签，临时改为：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

如果测试能拿到数据，说明是规则问题，之后记得改回安全规则（比如只允许认证用户访问）：

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

按照「检查路径与ID → 处理Action提取数据 → 验证安全规则」的顺序排查，基本就能解决返回null的问题啦。

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