读取文档 firestore 的子集合中的文档（V9（模块化））

Question

I have a collection of users. Each document in that collection contains user data. Inside of that document, there is information about their username, bio, etc. Also, there is a sub collection inside the user document called posts. And each document inside posts is an individual post the user made.

Currently, my program is reading live updates to check for changes in the username and bio. However, I want it to also check for live updates in within the posts collection to see if there has been a new post. So that it knows to display a new post in the users profile.

Here is my current code for checking for updates:

const [name, setName] = useState('');
const [bio, setBio] = useState('');

// Post title
const [p_title, setP_title] = useState('');

// Hears for when there's been an update
useEffect(() => {
    const unsubscribe = onSnapshot(doc(db, "usrs", usrUID), (doc) => {
        setName(doc.data().name);
        setBio(doc.data().bio);

        console.log(doc.data());
    });

    // Unsubscribe stops it from listening when it shouldn't
    return unsubscribe
}, []);

I was hoping there was some type of thing like:

doc.data().collection("Posts").posts.title

or something like that so that I could list the title of the posts from the subcollection, as well as the name and bio.

I am quite new to React native and firestore. I often feel like I'm using a different version to a lot of the information that is out there.

Any help would be appreciated!

Answer 1

One onSnapshot() can listen updates for the given document or collection only. So for a user's posts you'll need another listener. Try:

// Listen for user document updates
const unsubUserDoc = onSnapshot(doc(db, "usrs", usrUID), (doc) => {
  setName(doc.data().name);
  setBio(doc.data().bio);

  console.log(doc.data());
});

// Listen for user's post changes
const unsubPostsCol = onSnapshot(collection(db, "usrs", usrUID, "posts"), (querySnap) => {
  console.log(querySnap.docs.map((d) => ({
    id: d.id,
    ...d.data()
  })));

  // set all docs in state
});

The second listener will trigger every time a user's post is created/updated/deleted. This will also fetch all the posts once initialised so it might be best to paginate the results wherever possible.