React JS + Firestore 如何校验现有文档避免插入重复文档

问题根因 #

• 你调用db.collection('libros').doc()生成的是全新的空白文档引用，调用get()只会拿到这个未写入的空文档，没有查询集合内现有文档的逻辑，自然不会触发重复校验。
• 字段取值逻辑错误：doc.id是文档的字符串类型唯一ID，不包含你存储的业务字段，需要调用doc.data()才能拿到文档内存储的descripcion、grado等字段值。
• &&在React以及所有JavaScript环境下都是标准逻辑与运算符，此处使用没有问题。

修复方案 #

直接使用Firestore条件查询匹配同时符合两个字段要求的文档即可，无需自行遍历全集合，性能更高：

const register = (e) => {
  e.preventDefault();
  // 构造双字段匹配的查询条件
  const repeatCheckQuery = db.collection('libros')
    .where('descripcion', '==', descripcion)
    .where('grado', '==', grado);

  repeatCheckQuery.get()
    .then(querySnapshot => {
      // 查询结果非空则存在重复
      if (!querySnapshot.empty) {
        window.alert("该图书同年级下已存在");
        return;
      }
      // 无重复则新增文档
      const newDocRef = db.collection('libros').doc();
      newDocRef.set({
        materia: materia,
        descripcion: descripcion,
        editorial: editorial,
        grado: grado,
        precio: precio,
        id: newDocRef.id
      }).then(() => {
        window.alert("图书添加成功");
      })
    })
}

注意：首次运行查询前需要在Firestore控制台为descripcion和grado创建组合索引，查询报错时会自动生成索引创建入口，点击创建等待生效即可正常使用。

内容的提问来源于stack exchange，提问作者React Enjoyer