Проблема при обновлении фрагмента кода с firebase v8 до firebase v9

Я хочу изменить это ниже кода Firebase V8 на Firebase V9. Я пытался изменить этот код на v9 несколькими способами, но, к сожалению, все они были неудачными:

Пожалуйста, помогите мне изменить блок кода ниже на код на основе Firebase v9:

useEffect(() => {
 const unsubscribe = db.collection("chats").onSnapshot((snapshot) => {
 setChats(
 snapshot.docs.map((doc)=>({
 id:doc.id,
 data: doc.data(),
 }))
 )
 );
 return unsubscribe;
}, [])

Заранее спасибо:)

Решение проблемы

И collection()— onSnapshot()это функции верхнего уровня в Firebase v9 SDK, которые можно напрямую импортировать из Firestore SDK. Попробуйте выполнить рефакторинг кода, как показано ниже:

import { collection, onSnapshot } from "firebase/firestore";
useEffect(() => {
 const colRef = collection(db, "chats")
 onSnapshot(colRef, (snapshot) => {
 setChats(
 snapshot.docs.map((doc) => ({
 id: doc.id,
 data: doc.data(),
 }))
 )
 });
 return unsubscribe;
}, [])

Также проверьте:
Firestore: Каков шаблон добавления новых данных в Web v9?

В документации есть примеры кода, написанного как с синтаксисом V8, так и с синтаксисом V9, поэтому вы можете просто переключать вкладки Version 9 (Modular)и сравнивать его с предыдущим Version 8 (namespaced)синтаксисом.