Angular 5中Firebase快照返回不可迭代对象而非数组的问题

我之前在Angular项目里用Firebase开发时，也碰到过一模一样的问题！你说的没错，snapshot.val()返回的是个不可迭代的普通对象，确实会丢失每条数据的key，但其实我们在遍历snapshot子节点时，每个子快照（childSnapshot）本身就带着key属性，只要把它和数据合并就行。

具体解决方案 #

你可以在forEach遍历子快照的时候，把childSnapshot.key直接附加到数据对象上，这样存入数组的每个元素就同时包含原始数据和对应的key了。示例代码如下：

// 获取你的Firebase数据库引用
const dataRef = firebase.database().ref('your-target-path');

// 使用once()获取一次性数据（不需要监听变更）
dataRef.once('value').then(snapshot => {
  const targetArray1 = [];
  const targetArray2 = [];

  snapshot.forEach(childSnapshot => {
    // 合并原始数据和key到新对象中
    const itemWithKey = {
      ...childSnapshot.val(), // 展开原始数据
      key: childSnapshot.key  // 添加当前节点的key
    };

    // 按你的条件将数据存入对应数组
    if (itemWithKey.someProperty === 'condition1') {
      targetArray1.push(itemWithKey);
    } else if (itemWithKey.someProperty === 'condition2') {
      targetArray2.push(itemWithKey);
    }
  });

  // 现在两个数组里的元素都带有key字段了，直接用来做跳转链接就行
  console.log('数组1:', targetArray1);
  console.log('数组2:', targetArray2);
});

兼容性备选方案 #

如果你的项目还没配置ES6扩展运算符的支持，可以用Object.assign来合并对象：

const itemWithKey = Object.assign({}, childSnapshot.val(), { key: childSnapshot.key });

注意事项 #

• 不要直接修改childSnapshot.val()返回的对象，因为Firebase返回的这个对象可能是被冻结的（不可写），创建新对象合并是最安全的方式。
• 用once('value')确实是正确的选择，因为你不需要监听数据变更，一次性获取数据足够满足需求。

这样处理之后，你在跳转页面的时候，就可以直接用每个元素的key字段来构建链接参数啦！

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