如何从Firebase数据库获取URL列表并转为可索引JS数组？

嘿，我来帮你搞定这个问题！不管你用的是Firebase实时数据库还是Firestore，都能轻松把存储的URL转成普通JS数组，方便按索引访问。下面分两种情况给你详细说明：

情况一：使用Firebase实时数据库 #

假设你的数据库结构是这样的（urls节点下存储着多个URL）：

{
  "urls": {
    "key1": "https://example.com/link1",
    "key2": "https://example.com/link2",
    "key3": "https://example.com/link3"
  }
}

你可以通过以下代码获取并转换为数组：

// 假设你已经完成了Firebase的初始化配置
const db = firebase.database();
const urlsRef = db.ref('urls');

// 用于存储URL的数组
let urlArray = [];

// 一次性获取数据（如果需要实时监听变化，把once换成on即可）
urlsRef.once('value')
  .then(snapshot => {
    // 遍历快照中的每个子节点
    snapshot.forEach(childSnapshot => {
      const url = childSnapshot.val();
      urlArray.push(url);
    });
    
    // 现在就能按索引访问啦！比如获取第二个元素
    console.log(urlArray[1]); // 输出第二个URL
  })
  .catch(error => {
    console.error('获取数据时出错:', error);
  });

如果你习惯用async/await写法，也可以这样写：

async function fetchUrls() {
  const db = firebase.database();
  const urlsRef = db.ref('urls');
  const snapshot = await urlsRef.once('value');
  
  let urlArray = [];
  snapshot.forEach(childSnapshot => {
    urlArray.push(childSnapshot.val());
  });
  
  return urlArray;
}

// 调用函数并使用数组
fetchUrls().then(urls => {
  console.log(urls[1]); // 访问第二个URL
});

情况二：使用Firebase Firestore #

如果你的URL存在Firestore集合中（比如一个名为urls的集合，每个文档包含url字段），可以用下面的代码：

// 假设已完成Firebase初始化
const db = firebase.firestore();
const urlsCollection = db.collection('urls');

let urlArray = [];

urlsCollection.get()
  .then(querySnapshot => {
    querySnapshot.forEach(doc => {
      // 从文档中取出url字段的值
      const url = doc.data().url;
      urlArray.push(url);
    });
    
    console.log(urlArray[1]); // 获取第二个元素
  })
  .catch(error => {
    console.error('获取数据失败:', error);
  });

几个需要注意的点 #

• 实时更新：如果需要数据库中的URL变化时，数组也自动更新，把实时数据库中的once('value')换成on('value')，Firestore则可以使用onSnapshot监听。
• 顺序问题：实时数据库中用push()生成的键是按时间排序的，遍历出来的URL顺序和存储顺序一致；Firestore默认按文档ID排序，如果你需要自定义顺序，可以在get()前加上orderBy()方法。
• 异步操作：获取数据是异步的，一定要在回调函数或者then块中使用数组，不然会拿到空数组哦！

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