如何从 firebase 获取 object 的 id

Question

在设置 object 之后，我正在尝试获取 object 的 ID。 但我收到类型错误。 TypeError：无法读取未定义的属性（读取“val”）。 我应该如何使用 firebase 9 做到这一点？

这是我想要工作的代码：

set(push(ref(db, "expenses")), expense)
      .then((snapshot) => {
        console.log(snapshot.val());
        dispatch(
          addExpense({
            id: snapshot.key,
            ...expense,
          })
        );
      })
      .catch((e) => {
        console.log("This failed.", e);
      });

提前致谢。

Answer 1

为什么你的代码不起作用

set(ref, value)的文档显示定义为：

 function set(ref: DatabaseReference, value: unknown): Promise<void>

它返回一个Promise<void> ，所以没有snapshot被传递给你 then 。

如果 promise 解决（因此您的then回调被调用） expense已按原样写入服务器上的数据库。

---

如何修复它

如果您想获取push调用的密钥，您可以在set调用之外捕获它：

const newRef = push(ref(db, "expenses"));
set(newRef, expense)
  .then(() => {
    dispatch(
      addExpense({
        id: newRef.key,
        ...expense,
      })
    );
  })
  .catch((e) => {
    console.log("This failed.", e);
  });

调用push是纯客户端操作，因此不需要await或then 。

---

进一步的考虑

请注意，现在您只在将费用写入服务器后在本地显示费用。 如果这是您的用例的要求，那么。 但是当使用 Firebase 时，很常见的是：

1. 在expenses上使用永久的onValue侦听器以在 UI 中显示最新的费用。
2. 用一个简单的调用编写新的费用，没有then()监听器： set(push(ref(db, "expenses")), expense);
3. 然后 Firebase SDK 将立即使用新值调用本地onValue侦听器，假设写入将成功。
4. 因此，您的 UI 将立即显示本地值，为用户提供几乎即时的响应。
5. 在服务器（即您的安全规则）拒绝写入操作的（更不常见的）情况下， onValue再次使用更正的数据调用 onValue，因此您的 UI 可以更新 state。