Firebase Firestore：如何返回onSnapshot的Promise？调用报错求助

你遇到的错误核心在于：Firestore的onSnapshot方法不是返回Promise的异步方法，它是用来注册实时数据监听的API，必须传入回调函数（或者配置对象+回调）才能正常工作。你直接返回onSnapshot()的调用结果，然后尝试用.then()链式调用，完全不符合它的API规范，所以触发了参数错误。

方案1：只需要一次性获取数据（不需要实时更新） #

如果你的场景不需要监听数据变化，只是想一次性读取在线用户列表，那么应该使用Firestore的get()方法，这个方法是返回Promise的，刚好符合你用.then()调用的需求：

修改onlineUsers方法： #

onlineUsers() {
  // 使用get()获取一次性快照，它返回Promise
  return this.status_database_ref.where('state', '==', 'online').get();
}

组件中调用： #

componentDidMount() {
  firebaseService.onlineUsers().then(querySnapshot => {
    // 遍历快照处理数据
    const onlineUsers = [];
    querySnapshot.forEach(doc => {
      onlineUsers.push({ ...doc.data(), id: doc.id });
    });
    console.log('在线用户列表：', onlineUsers);
    // 这里可以把数据设置到组件state中
  }).catch(error => {
    console.error('获取数据失败：', error);
  });
}

方案2：需要实时监听数据变化 #

如果你的场景需要实时感知在线用户的增减（比如用户上线/下线时自动更新UI），那必须使用onSnapshot，但要按照它的正确用法来封装：

修改onlineUsers方法： #

我们可以让这个方法接收一个回调函数，用来处理实时更新的数据，同时返回取消监听的函数（方便组件卸载时清理）：

onlineUsers(onUpdate) {
  // 注册监听，返回unsubscribe函数
  const unsubscribe = this.status_database_ref.where('state', '==', 'online')
    .onSnapshot(querySnapshot => {
      // 处理快照数据，传给回调函数
      const onlineUsers = [];
      querySnapshot.forEach(doc => {
        onlineUsers.push({ ...doc.data(), id: doc.id });
      });
      onUpdate(onlineUsers);
    }, error => {
      console.error('监听在线用户失败：', error);
    });
  
  // 返回取消订阅的函数，供组件调用
  return unsubscribe;
}

组件中调用： #

componentDidMount() {
  // 注册监听，保存unsubscribe函数
  this.unsubscribeOnlineUsers = firebaseService.onlineUsers(onlineUsers => {
    console.log('实时更新的在线用户：', onlineUsers);
    // 更新组件state
    this.setState({ onlineUsers });
  });
}

// 组件卸载时取消监听，防止内存泄漏
componentWillUnmount() {
  if (this.unsubscribeOnlineUsers) {
    this.unsubscribeOnlineUsers();
  }
}

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