"Unhandled Rejection (TypeError): snapshot.data is not a function"调用 Firestore in 使用效果

Question

我有一个React组件渲染cafe'和'cafe review'数据。我正在进行两个API调用-一个到我的cafes集合，另一个到我的reviews集合，我把它们都放在useEffect钩子内，如下所示:

const [cafe,setCafe] = useState({name:'',photoURL:'',address:'',phoneNumber:'', website:''})
const [reviews,setReviews] = useState({blurb:'', cafeName:'',stars:'',title:'',userName:''})
let id = match.params.id
useEffect(() => {
db.collection('cafes')
.doc(id)
.get()
.then(snapshot => {
setCafe({
name: snapshot.data().name,
photoURL: snapshot.data().photoURL,
address: snapshot.data().address,
phoneNumber: snapshot.data().phoneNumber,
website: snapshot.data().website
})
})
db.collection('reviews')
.get()
.then(snapshot => {
console.log(snapshot.data())  //*this* yeilds the error
})
},[])

对cafes集合的调用工作成功，并且正在返回所有数据。然而，对reviews集合的第二次调用失败了。当我将snapshot.data()记录到浏览器时，我得到以下错误:

Unhandled Rejection (TypeError): snapshot.data is not a function

这很奇怪，因为在cafesapi调用上成功执行等效日志会在浏览器中显示对象。

我尝试添加一些条件代码，但没有产生任何数据:

db.collection('reviews')
.get()
.then(doc => {
if(doc && doc.exists){
console.log(doc.data())
} else {
console.log('no doc')
}
})

关于如何获得两个API调用返回数据的任何建议?我在这里使用useEffect是错误的吗?

Answer 1

在集合上调用get()时，将返回一个QuerySnapshot——它表示文档列表。您需要遍历该快照以获取各个文档，您可以从中获取数据:

db.collection('reviews')
.get()
.then(snapshot => {
snapshot.forEach((doc) =>
console.log(doc.data())
})
})

对于这些类型的语法错误，我强烈建议保持Firestore参考文档打开-因为通过跟踪CollectionReference.get()调用的踪迹最容易发现这些错误。