Reactjs 在onAuthStateChanged侦听器中分离Firestore侦听器

我想我知道如何通过返回侦听器来分离侦听器，但在这种特定情况下，我不确定最好的方法

我有一个React组件，在其中我使用

onAuthStateChanged

订阅身份验证更改

如果它返回一个用户：我在Firestore中创建一个该用户数据的侦听器

useffect（（）=>{
返回firebase.auth.onAuthStateChanged（用户=>{
如果（用户）{
const unsubscribeFirestore=firebase.db
.collection（'用户'）
.doc（user.uid）
.onSnapshot（文档=>{
setUser（{user，…doc.data（）}）
})
}否则{
setUser（{user}）
}
})
}，[firebase]）

---

我应该在哪里以及如何返回

unsubscribeFirestore

以分离它？

您的代码似乎已经隐式地从

firebase.auth.onAuthStateChanged

返回了

unsubscribe

回调，但是，您可以通过在一个局部作用域变量中捕获返回的

unsubscribe

函数，使其更具必要性

您可以在React ref中捕获内部快照unsubscribe，以便在

useffect

cleanup函数中访问

const snapShotUnsubscribeRef = useRef();

useEffect(() => {
  const unsubscribe = firebase.auth.onAuthStateChanged(user => {
    if (user) {
      snapShotUnsubscribeRef.current = firebase.db
        .collection('users')
        .doc(user.uid)
        .onSnapshot(doc => {
          setUser({ user, ...doc.data() })
        })
    } else {
      setUser({ user })
    }
  });

  return () => {
    snapShotUnsubscribeRef.current?.();
    // Or if you can't use Optional Chaining:
    //   snapShotUnsubscribeRef.current && snapShotUnsubscribeRef.current()
    unsubscribe();
  };
}, [firebase]);

以下是有关Firebase官方文档的详细信息

德鲁给出的答案是正确的。要添加，我认为您不需要担心嵌套的第二个侦听器，因为if子句正在检查是否有用户，如果没有，则第二个侦听器无论如何都不会应用。您可以尝试这两个用例来测试它是否工作

---

下面是一个处理这个用例的例子。所以这应该是可行的。

谢谢，是的，因为

onAuthStateChanged

我知道返回是有效的，更多的是为了第二个侦听器

firebase.db.collection.doc.onSnapshot

，我不确定是否返回

unsubscribe

也分离它。@uciska IMO这不是必需的，但老实说，我找不到与此相关的文档。我将更新我的答案，以便在外部作用域中捕获这两个，以便在效果清理函数中调用。Make sens，谢谢@drew reese