如何解决错误“TS2532:对象可能是“未定义”的问题？

Question

我正在尝试重建一个使用Firebase云函数和Firestore的web应用程序示例。部署函数时，出现以下错误：

src/index.ts:45:18 - error TS2532: Object is possibly 'undefined'.
45     const data = change.after.data();

这是功能：

export const archiveChat = functions.firestore
  .document("chats/{chatId}")
  .onUpdate(change => {
    const data = change.after.data();

    const maxLen = 100;
    const msgLen = data.messages.length;
    const charLen = JSON.stringify(data).length;

    const batch = db.batch();

    if (charLen >= 10000 || msgLen >= maxLen) {

      // Always delete at least 1 message
      const deleteCount = msgLen - maxLen <= 0 ? 1 : msgLen - maxLen
      data.messages.splice(0, deleteCount);

      const ref = db.collection("chats").doc(change.after.id);

      batch.set(ref, data, { merge: true });

      return batch.commit();
    } else {
      return null;
    }
  });

我只是尝试部署函数来测试它。并且已经在网上搜索过类似的问题，但是找不到任何其他与我的问题相匹配的帖子。

Answer 1

对于其他面临与我类似问题的人，如果您知道特定对象属性不能为null，则可以使用非null断言运算符（！）在有问题的项目之后。这是我的密码：

  const naciStatus = dataToSend.naci?.statusNACI;
  if (typeof naciStatus != "undefined") {
    switch (naciStatus) {
      case "AP":
        dataToSend.naci.certificateStatus = "FALSE";
        break;
      case "AS":
      case "WR":
        dataToSend.naci.certificateStatus = "TRUE";
        break;
      default:
        dataToSend.naci.certificateStatus = "";
    }
  }

因为dataToSend。naci不能在switch语句中定义，代码可以更新为包含感叹号，如下所示：

  const naciStatus = dataToSend.naci?.statusNACI;
  if (typeof naciStatus != "undefined") {
    switch (naciStatus) {
      case "AP":
        dataToSend.naci!.certificateStatus = "FALSE";
        break;
      case "AS":
      case "WR":
        dataToSend.naci!.certificateStatus = "TRUE";
        break;
      default:
        dataToSend.naci!.certificateStatus = "";
    }
  }

Answer 2

如果您使用的是Typescript 3.7或更新版本，现在还可以执行以下操作：

    const data = change?.after?.data();

    if(!data) {
      console.error('No data here!');
       return null
    }

    const maxLen = 100;
    const msgLen = data.messages.length;
    const charLen = JSON.stringify(data).length;

    const batch = db.batch();

    if (charLen >= 10000 || msgLen >= maxLen) {

      // Always delete at least 1 message
      const deleteCount = msgLen - maxLen <= 0 ? 1 : msgLen - maxLen
      data.messages.splice(0, deleteCount);

      const ref = db.collection("chats").doc(change.after.id);

      batch.set(ref, data, { merge: true });

      return batch.commit();
    } else {
      return null;
    }

Typescript表示更改或数据可能是未定义的（取决于更新返回的内容）。

因此，您应该将其包装在空/未定义的检查中：

if(change && change.after && change.after.data){
    const data = change.after.data();

    const maxLen = 100;
    const msgLen = data.messages.length;
    const charLen = JSON.stringify(data).length;

    const batch = db.batch();

    if (charLen >= 10000 || msgLen >= maxLen) {

      // Always delete at least 1 message
      const deleteCount = msgLen - maxLen <= 0 ? 1 : msgLen - maxLen
      data.messages.splice(0, deleteCount);

      const ref = db.collection("chats").doc(change.after.id);

      batch.set(ref, data, { merge: true });

      return batch.commit();
    } else {
      return null;
    }
}

如果您100%确定始终定义了对象，则可以将以下内容：

const data = change.after!.data();

Answer 3

随着TypeScript 3.7的发布，可选链接（？操作符）现在正式可用。

因此，可以将表达式简化为以下内容：

const data = change?.after?.data();

您可以从该版本的发行说明中了解更多信息，其中涵盖了该版本发布的其他有趣功能。

运行以下命令以安装最新的稳定版本的TypeScript。

npm install typescript

也就是说，可选的链接可以与Nulish合并一起使用，以在处理null或未定义的值时提供回退值

const data = change?.after?.data() ?? someOtherData();

其他要点：

如果在条件if语句中使用可选的链接，则仍需要确保执行正确的值/类型相等性检查。

在strict TypeScript中，以下操作将失败，因为您可能正在将未定义的值与数字进行比较。

if (_?.childs?.length > 0) 

相反，这是您应该做的：

if (_?.childs && _.childs.length > 0)