Firebase Cloud Firestore更新功能报错：TypeError: n.indexOf is not a function

核心错误分析 #

1. getElementsByClassName返回集合而非单个元素：你直接调用.parseInt完全错误——parseInt是全局函数，不是DOM集合的方法，必须先获取具体元素的value或textContent再调用它。
2. postID未正确获取文档ID：getElementsByClassName("newID")返回的是元素集合，不能直接传给doc()函数当作文档ID。这正是触发TypeError: n.indexOf is not a function的根本原因：Firestore试图对集合对象调用字符串方法，自然报错。
3. 未读取Firestore原有字段值：你的代码直接用输入框值做减法，但没先获取文档里description的当前值，根本实现不了“原有数值减输入值”的逻辑。

修复后的完整代码 #

document.addEventListener("DOMContentLoaded", function () {
  // 获取单个DOM元素（假设页面中对应类名的元素只有一个）
  const postIDElement = document.querySelector(".newID");
  const descriptionElement = document.querySelector(".description");
  const quantityInputElement = document.querySelector(".quantity-input");
  const buttonpay = document.querySelector("#buttonpay"); // 确保按钮选择器正确

  buttonpay.addEventListener("click", handleUpdate);

  async function handleUpdate(e) {
    e.preventDefault();

    try {
      // 1. 提取Firestore文档ID
      const postID = postIDElement.textContent.trim();
      if (!postID) throw new Error("未获取到有效文档ID");

      // 2. 解析输入的待减数值
      const quantityToSubtract = parseInt(quantityInputElement.value, 10);
      if (isNaN(quantityToSubtract)) throw new Error("输入的数量不是有效数字");

      // 3. 获取文档当前数据
      const docRef = doc(db, "posts", postID);
      const docSnap = await getDoc(docRef);
      if (!docSnap.exists()) throw new Error("目标文档不存在");

      const currentDescValue = parseInt(docSnap.data().description, 10);
      if (isNaN(currentDescValue)) throw new Error("文档中description字段不是有效数字");

      // 4. 计算新值并更新
      const newDescValue = currentDescValue - quantityToSubtract;
      await updateDoc(docRef, {
        description: newDescValue
      });

      // 可选：同步更新页面显示
      descriptionElement.textContent = newDescValue;
      quantityInputElement.value = "";
    } catch (error) {
      console.error("更新失败:", error);
    }
  }
});

关键修复点说明 #

• 用querySelector替代getElementsByClassName：直接获取单个元素，避免处理集合的冗余操作（如果页面有多个同元素，需调整选择器或用循环处理）。
• 正确提取文档ID：从newID元素的文本内容中取出字符串类型的文档ID，符合Firestore的参数要求。
• 先读再写实现减法逻辑：通过getDoc获取文档当前数据，计算后再调用updateDoc完成更新，符合你的业务需求。
• 添加基础校验：检查ID有效性、输入值合法性、文档存在性等，避免无意义的报错。
• 规范parseInt用法：传入第二个参数（基数10），确保数字解析结果准确。

内容的提问来源于stack exchange，提问作者Lưu Thanh Bình