错误'TS2532：对象可能是'未定义'答案

【问题标题】：error 'TS2532: Object is possibly 'undefined'错误'TS2532：对象可能是'未定义'
【发布时间】：2022-01-05 15:08:39
【问题描述】：

    useEffect(() => {
    firebase
      .firestore()
      .collection('likes')
      .doc(slug)
      .get()
      .then(res => {
        if (!res.data()) {
          console.log('No matching document');
        } else {
          setLikes(res.data().likes);
        }
      })
      .catch(err => console.log(err));
  }, []);

enter image description here

我该如何解决这个错误。我正在尝试重建一个使用 Firebase Cloud Functions 和 Firestore 的 Web 应用示例。

【问题讨论】：

标签： typescript firebase

【解决方案1】：

因为 res.data 是一个可以返回 undefined 的函数，所以从 typescript 的角度来看，调用的结果总是有可能是 undefined。

因此，您可以将res.data() 的结果分配给一个变量，然后使用它来代替res.data()。

【讨论】：

【解决方案2】：

使用 !res.data() 不会告诉 Typescript res.data() 不会返回 undefined。

你要么必须存储结果，然后输入 guard it：

.then(res => { // res is a DocumentSnapshot<DocumentData>
  const data = res.data(); // data is DocumentData | undefined
  if (!data) {
    console.log('No matching document');
  } else {
    setLikes(data.likes); // data is DocumentData
  }
})

或者，您可以改用DataSnapshot#exists（首选）：

.then(res => { // res is a DocumentSnapshot<DocumentData>
  if (!res.exists) {
    console.log('No matching document');
  } else {
    setLikes(res.data().likes); // res is treated as a QueryDocumentSnapshot<DocumentData> (res.data() always returns DocumentData)
  }
})