React中Firestore onSnapshot报错：TypeError: docRef.onSnapshot is not a function

问题根源 #

你代码里的docRef是Firestore集合引用，而onSnapshot作为监听单个文档变化的方法，只能被文档引用调用。直接用集合引用调用该方法，就会抛出这个错误。

同时，你原代码中即使集合的onSnapshot能运行，后续的snap.data()也会出错——因为集合的快照是QuerySnapshot，没有data()方法，只有单个文档的DocumentSnapshot才有这个方法。

修正代码 #

修改思路：先创建单个文档的引用（可以是自动生成ID的文档），再用这个文档引用执行写入和监听操作：

// 创建自动生成ID的结账会话文档引用
const checkoutDocRef = doc(
  collection(Firestoredb, 'customers', '8UAC7GBYSHW1jTToBgGTLyYxtXJ2', 'checkout_sessions')
);

// 写入结账会话初始数据
setDoc(checkoutDocRef, {
  price: 'price_1LaJC1CKMdmWgnyspBbFet9v',
  success_url: window.location.origin,
  cancel_url: window.location.origin,
});

// 监听该文档的变化，获取Stripe结账URL
checkoutDocRef.onSnapshot((snap) => {
  // 加空对象兜底，避免文档未加载时读取data()报错
  const { error, url } = snap.data() || {};
  
  if (error) {
    alert(`发生错误: ${error.message}`);
    return;
  }
  
  if (url) {
    window.location.assign(url);
    setPayURL(url);
  }
});

额外说明 #

• 确保你使用的Firebase Stripe扩展会监听checkout_sessions集合的新文档创建，并自动将Stripe结账URL写入该文档的url字段。
• 如果需要自定义文档ID，只需在doc()方法里传入ID参数即可，比如：doc(collectionRef, 'custom-checkout-id')。

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