如何将Firestore改造为实时数据库？附现有CRUD代码求助

要实现无需刷新的实时数据同步，核心是用Firestore的onSnapshot方法替代一次性获取数据的getDocs。onSnapshot会监听集合的所有变化（新增、修改、删除），自动触发回调更新页面数据。下面是改造后的完整代码：

const [name, setName] = useState("");
const [collaborators, setCollaborators] = useState([]);
const [isEdit, setIsEdit] = useState(false);
const [tempId, setTempId] = useState("");

const collaboratorsCollectionRef = collection(db, "collaborators");

useEffect(() => {
  // 用onSnapshot监听集合变化，返回取消监听的函数
  const unsubscribe = onSnapshot(collaboratorsCollectionRef, (snapshot) => {
    // 每次数据变化时更新state
    setCollaborators(
      snapshot.docs.map((doc) => ({
        ...doc.data(),
        id: doc.id,
      }))
    );
  });

  // 组件卸载时取消监听，防止内存泄漏
  return () => unsubscribe();
}, []);

async function createCollaborators() {
  await addDoc(collaboratorsCollectionRef, {
    name,
  });
  setName(""); // 新增后清空输入框
}

async function deleteCollaborator(id) {
  const collaborator = doc(db, "collaborators", id);
  await deleteDoc(collaborator);
}

function updateCollaborator(collaborator) {
  setIsEdit(true);
  setTempId(collaborator.id);
  setName(collaborator.name);
}

async function handleSubmitChangeCollaborator() {
  const collaborator = doc(db, "collaborators", tempId);
  await updateDoc(collaborator, {
    name,
  });
  setName("");
  setIsEdit(false); // 编辑完成后退出编辑状态
}

关键改动说明 #

• 替换数据获取逻辑：把原来的getDocs异步请求换成onSnapshot监听，初始加载和后续数据变化都会自动触发回调更新collaborators状态
• 添加监听清理：onSnapshot返回的unsubscribe函数要在useEffect的返回值中调用，组件卸载时取消监听，避免内存泄漏
• 优化原有CRUD函数：新增后清空输入框，编辑完成后退出编辑状态，提升用户体验；原有的增删改逻辑无需大幅修改，因为操作Firestore后onSnapshot会自动捕获变化并更新UI

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