React Native Firebase SDK中OnSnapshot监听消息报错排查求助

我正在使用Firebase SDK开发一款React Native聊天应用，在聊天页面尝试监听Firestore数据库中的消息更新。参考了使用react-native-firebase的代码仓库，但自己使用的是Firebase SDK，找不到对应的等效代码，打开页面时出现以下错误：

undefined is not a function (near '...(0,_firebaseConfig.listenToMessages)(threadID).onSnapshot...')

我认为问题出在react-native-firebase到Firebase SDK的代码转换上，但不确定具体错误点。以下是我的代码：

1. firebaseConfig中的listenToMessages函数 #

export const listenToMessages = async (threadID) => {
  return firebase.firestore()
    .collection('threads')
    .doc(threadID)
    .collection('messages');

  // try {
  //   const q = query(collection(db, "threads"), where("tid", "==", threadID));
  //   const doc = await getDocs(q);
  //   const data = doc.docs[0].data();
  //   return data.messages;
  // } catch {
  //   return []; 
  // }
};

2. UseFocusEffect中的监听代码 #

const unsubscribe = listenToMessages(threadID).onSnapshot(
    querySnapshot => {
      const formattedMessages = querySnapshot.docs.map(doc => {
        return {
            _id: doc.id,
            text: '',
            createdAt: new Date().getTime(),
            user: {}
        };
      });

      setMessages(formattedMessages);
    },
);

return () => {
    unsubscribe();
};

错误原因及修正方案 #

错误核心 #

你把listenToMessages定义成了async函数，而async函数默认会返回一个Promise对象，但你需要的是直接返回Firestore的CollectionReference（它才拥有onSnapshot方法）。调用listenToMessages(threadID)得到的是Promise，Promise上没有onSnapshot方法，因此触发了报错。

修正步骤 #

1. 移除async关键字，让函数直接返回CollectionReference：

export const listenToMessages = (threadID) => {
  return firebase.firestore()
    .collection('threads')
    .doc(threadID)
    .collection('messages');
};

2. 完善消息格式化逻辑，从文档数据中读取真实字段（不要写死默认值）：

const formattedMessages = querySnapshot.docs.map(doc => {
  const messageData = doc.data();
  return {
      _id: doc.id,
      text: messageData.text || '',
      // 若createdAt是Firestore的Timestamp类型，需转为时间戳
      createdAt: messageData.createdAt?.toDate().getTime() || new Date().getTime(),
      user: messageData.user || {}
  };
});

3. 确认Firebase初始化正确：确保你已经正确初始化了Firebase实例，firebase.firestore()能正常返回Firestore服务实例。

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