React Native 如何获取 Firebase 中特定文档的文档 ID？

Question

I'm working on a project that allows users to write anonymous letters addressed to people by name and I want to add a like/dislike functionality to the app. I was confused on how to get the specific document ID for that post and also incrementing the likeCount by 1 (in the areas where the "????" are at in the code below)? I want it to update the field "likeCount" in firebase by 1 when the thumbs up icon is pressed.

This is the portion of my code that contains the posts (data from firebase) that is mapped for each firebase document:

function Home() {
  const [posts, setPosts] = useState([]);
  const [searchValue, setSearchValue] = useState("");
  const [filteredPosts, setFilteredPosts] = useState([]);
  const collectionRef = collection(db, "posts");

  useEffect(() => {
    const getPosts = async () => {
      const data = await getDocs(collectionRef);
      const filteredRef = query(
        collectionRef,
        where(`recipiant`, "==", `${searchValue}`)
      );

      const querySnapshot = await getDocs(filteredRef);
      let posts = [];
      querySnapshot.forEach((doc) => {
        posts.push(doc.data());
      });
      setFilteredPosts(posts);

      setPosts(
        searchValue
          ? filteredPosts
          : data.docs.map((doc) => ({ ...doc.data() }))
      );
    };

    getPosts();
  }, [searchValue, filteredPosts]);

  return (
    <ImageBackground source={image} style={styles.image}>
      <SafeAreaView style={styles.container}>
        <ScrollView>
          <View style={styles.header}>
            <Text style={styles.title}>Home</Text>
          </View>
          <Pressable>
            <Input
              placeholder="Search for a name"
              inputContainerStyle={styles.searchbar}
              inputStyle={styles.searchInput}
              placeholderTextColor="gray"
              onChangeText={(text) => setSearchValue(text)}
            />
          </Pressable>
          {posts.map((post, key) => {
            return (
              <View style={styles.postWrapper} key={key}>
                <View style={styles.btnWrapper}>
                  <View style={styles.likeBtn}>
                    <Icon
                      name="thumbs-up"
                      size={25}
                      color="#fff"
                      onPress={() => {
                        const postRef = doc(db, "posts", `????`);
                        updateDoc(postRef, {
                          likeCount: ????,
                        });
                      }}
                    />
                    <Text style={styles.likeCount}>{post.likeCount}</Text>
                  </View>
                  <Icon
                    name="thumbs-down"
                    size={25}
                    color="#fff"
                    onPress={() => {}}
                  />
                </View>
                <Card
                  containerStyle={{
                    backgroundColor: "rgba( 255, 255, 255, 0.5 )",
                    borderRadius: 50,
                    height: 300,
                    marginBottom: 25,
                    width: 330,
                    backdropFilter: "blur( 20px )",
                    padding: 20,
                  }}
                >
                  <Card.Title style={styles.notepadHeader}>Message.</Card.Title>

                  <View style={styles.center}>
                    <ScrollView>
                      <Text style={styles.notepadText}>
                        To: <Text style={styles.name}>{post.recipiant}</Text>
                      </Text>
                      <Text style={styles.notepadTextLetter}>
                        {post.letter}
                      </Text>
                      <Text style={styles.notepadFooter}>
                        From:{" "}
                        <Text
                          style={{
                            color: "#9e4aba",
                            fontSize: 20,
                          }}
                        >
                          {post.displayName}
                        </Text>
                      </Text>
                    </ScrollView>
                  </View>
                </Card>
              </View>
            );
          })}
        </ScrollView>
      </SafeAreaView>
    </ImageBackground>
  );
}

This is how my Firestore looks like and I want to retrieve the document id in the circle.

Answer 1

This will give you the particular doc and perform updateDoc query accordingly.

query(collections('collection_name), where(documentId(), '==', 'your_post_id'))

Answer 2

First, you can add the document ID in 'posts' array as shown below:

const posts = querySnapshot.docs.map((d) => ({ id: d.id, ...d.data() }));
setFilteredPosts(posts);

Then you can read post ID when required:

<Icon
  name = "thumbs-up"
  size = {25}
  color = "#fff"
  onPress = {() => {
    const postRef = doc(db, "posts", post.id);
    updateDoc(postRef, {
      likeCount: ?? ?? ,
    });
  }
}
/>