使用Firebase的Firestore更新Vue JS中的文档时遇到问题

我正在使用Vue JS Vue Cli 3构建一个简单的单页web应用程序，其中Firebase的Firestore作为后端数据库。我已设法轻松地添加和删除记录。我在尝试“更新”用户详细信息时遇到问题

我的此函数代码如下所示：

saveEditUser() {
  db.collection('users')
    .where('email', '==', this.form.email)
    .get()
    .then(snap => {
      snap.forEach(doc => {
        doc.ref.update({
          email: this.form.email
        })
      })
    })
    .then(() => {
      console.log('Successfully updated the record')
    })
    .catch(error => {
      console.error('There was an error editing the record: ' + error)
    })
}

saveEditUser() {
  const email = this.form.email;
  db.collection('users')
    .where('email', '==', email)
    .get()
    .then(snap => {
      return snap.docs[0].ref.update({
          email: email
        });
    })
    .then(() => {
      console.log('Successfully updated the record')
    })
    .catch(error => {
      console.error('There was an error editing the record: ' + error)
    })
}

在调试过程中，我发现了一些东西：

当This.form.email中的“This”在forEach循环中不可用时，这不是范围问题。 我认为可能是这样的，所以我在循环之前声明了一个'const vm=this'，并尝试使用vm.form.email，但没有骰子。 另外，当我尝试将email字段更新为简单的字符串（如“abc”）而不是动态值（如this.form.email）时，它会起作用！ 在这个可笑的问题上花了几个小时后，我正式被难倒了。请派人来帮忙

谢谢你。

TL；DR：OP正在更新具有相同值的记录，因此Firestore数据库中似乎没有任何更改。但是，在他的代码中，需要返回由单个异步操作或异步操作集返回的承诺

由于您可能会使用update方法并行地对数据库执行多个异步操作，该方法返回一个promise，请参阅，因此您需要使用promise.all，如下所示

saveEditUser() {
  const email = this.form.email;
  const= promises = [];
  db.collection('users')
    .where('email', '==', email )
    .get()
    .then(snap => {
      snap.forEach(doc => {
        promises.push(
            doc.ref.update({
                email: email   //Actually the problems comes from here, see below
             })
        );
        return Promise.all(promises);
      })
    })
    .then(() => {
      console.log('Successfully updated the record')
    })
    .catch(error => {
      console.error('There was an error editing the record: ' + error)
    })
}

如果您100%确定您的查询将只返回一个文档，那么您可以直接更新文档，但是您必须返回更新返回的承诺，如下所示：

saveEditUser() {
  db.collection('users')
    .where('email', '==', this.form.email)
    .get()
    .then(snap => {
      snap.forEach(doc => {
        doc.ref.update({
          email: this.form.email
        })
      })
    })
    .then(() => {
      console.log('Successfully updated the record')
    })
    .catch(error => {
      console.error('There was an error editing the record: ' + error)
    })
}

saveEditUser() {
  const email = this.form.email;
  db.collection('users')
    .where('email', '==', email)
    .get()
    .then(snap => {
      return snap.docs[0].ref.update({
          email: email
        });
    })
    .then(() => {
      console.log('Successfully updated the record')
    })
    .catch(error => {
      console.error('There was an error editing the record: ' + error)
    })
}

注意：通过在函数开头声明email const，您不应该再遇到任何上下文问题

更新我们的评论和讨论如下：

实际上，您正在使用相同的电子邮件值进行更新。所以你看不到任何结果是正常的。只需尝试使用另一个值进行更新，如以下代码所示：

saveEditUser() {
  const email = this.form.email;
  db.collection('users')
    .where('email', '==', email)
    .get()
    .then(snap => {
      return snap.docs[0].ref.update({
          email: 'john.doe@gmail.com'
        });
    })
    .then(() => {
      console.log('Successfully updated the record')
    })
    .catch(error => {
      console.error('There was an error editing the record: ' + error)
    })
}

如果要使用表单中的值进行测试，只需使用两个字段：一个是要查询的值，另一个是新值，如：

<input v-model="form.mail" placeholder="mail to search for">
<input v-model="form.newMail" placeholder="new email">

.....

    saveEditUser() {
      const emailToQuery = this.form.email;
      const newEmail = this.form.newMail;
      db.collection('users')
        .where('email', '==', emailToQuery )
        .get()
        .then(snap => {
          return snap.docs[0].ref.update({
              email: newEmail 
            });
        })
        .then(() => {
          console.log('Successfully updated the record')
        })
        .catch(error => {
          console.error('There was an error editing the record: ' + error)
        })
    }

---

这对我来说很有意义，但不幸的是，它似乎对结果没有任何影响。日志中没有错误或任何内容，我获得了成功，与以前一样，但记录没有更新。编辑：现在正在尝试第二个解决方案。不，安全规则是完全开放的，只是目前正在学习，所以不必为第二个解决方案操心，我假设您的意思是snap.docs[0].ref.update-无论如何，无法处理以下错误：TypeError:无法读取此.form.email的undefinedIs值的属性“ref”正确吗？如果您执行console.logthis.form.email；，该怎么办；？让我们。