如何使用JavaScript在Firebase数据变更时调用函数

嘿，我明白你想要的是类似onDataSetChanged的实时监听功能，Firebase其实提供了专门的实时监听API，分两种常用场景给你说明：

Firebase Realtime Database 监听方案 #

如果用的是Realtime Database，你可以用on()方法绑定监听事件，最常用的是value事件（监听节点下所有数据的变更），或者更精准的child_changed（仅监听子节点数据更新）。

举个简单的例子：

// 假设你要监听的节点是 "/scores/user1"
const dbRef = firebase.database().ref('/scores/user1');

// 绑定实时监听，数据变更时触发回调函数
dbRef.on('value', (snapshot) => {
  const newData = snapshot.val();
  console.log('数据更新啦:', newData);
  // 在这里调用你自己的业务函数
  yourCustomFunction(newData);
});

// 你的自定义函数
function yourCustomFunction(data) {
  // 处理变更后的逻辑
}

如果需要停止监听，记得调用off()方法避免内存泄漏：

dbRef.off('value');

Cloud Firestore 监听方案 #

如果用的是Firestore，那就用onSnapshot()方法来监听文档或集合的实时变化：

监听单个文档变更 #

const docRef = firebase.firestore().collection('users').doc('user1');

// 实时监听文档变化
const unsubscribe = docRef.onSnapshot((doc) => {
  if (doc.exists) {
    const newData = doc.data();
    console.log('文档数据更新:', newData);
    yourCustomFunction(newData);
  } else {
    console.log('文档不存在');
  }
});

// 停止监听时调用这个unsubscribe函数
// unsubscribe();

监听集合中数据变更 #

如果要监听整个集合的变化，也可以用类似的方式：

const collectionRef = firebase.firestore().collection('scores');

const unsubscribe = collectionRef.onSnapshot((querySnapshot) => {
  querySnapshot.docChanges().forEach((change) => {
    if (change.type === 'modified') {
      console.log('修改的数据:', change.doc.data());
      yourCustomFunction(change.doc.data());
    }
  });
});

这两种方案都能实现你要的“数据变更时自动触发函数”的需求，根据你用的Firebase产品类型选对应的就行~

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