reactjs - 在包含多个文档的集合中查询文档 ID

Question

我有一个artworks包含两个文档的集合：

kvAKyzz8duHJefihekpr

artist: "Pablo Picasso"
status: true

pCETdBNd0B6nm60BD15b

artist: "Franz Klein"
status: true

问题 如何kvAKyzz8duHJefihekpr从集合中获取文档 ID（例如 ），然后将其作为道具传递？

const [artworks, setArtworks] = useState([]);
  
  useEffect(() => {
    db.collection("artworks").onSnapshot((snapshot) =>
      setArtworks(snapshot.docs.map((doc) => doc.data()))
    );
  }, []);

  return (
    <div className="review__board">
      
      <div>
        {artworks.map((artwork) => (
          <ReviewCard
            artist={artwork.artist}
           // pass in id as a prop??? id={artwork.id}
          />
        ))}
      </div>
    </div>

换句话说，如何在集合中查询文档 id，然后将其用作道具？

这是我收藏的形状：

标签： reactjsfirebasegoogle-cloud-firestore

Answer 1

一种方法是：

db.collection("artworks").onSnapshot((snapshot) =>
  setArtworks(snapshot.docs.map(doc => ({...doc.data(), id: doc.id})))
);

我喜欢使用 Object.defineProperty 来id附加数据。这样，当写回 Firestore 时，我不会id在数据库中有字段（除非您打算使用它）。

const fromFirestore = (doc) => {
  const data = doc.data();
  Object.defineProperty(data, 'id', {value: doc.id})
  return data;
}

db.collection("artworks").onSnapshot((snapshot) =>
  setArtworks(snapshot.docs.map(fromFirestore))
);