Firebase v9中如何向用户文档的todo数组添加数据？

你的addTodo()方法出错的核心原因是用错了API：addDoc用于向集合中新增文档，而你需要的是更新已存在的用户文档里的todo数组。正确做法是通过updateDoc结合arrayUnion操作符实现数组元素的追加。

修正后的addTodo()方法 #

async addTodo() {
  if (this.newTodo.trim() !== "" && this.newTask.trim() !== "") {
    const currentUser = auth.currentUser;
    if (!currentUser) {
      console.log("用户未登录");
      return;
    }
    const currentUserUid = currentUser.uid;
    // 获取目标用户文档的引用
    const userDocRef = doc(db, "users", currentUserUid);
    
    try {
      // 使用arrayUnion向todo数组添加新待办项
      await updateDoc(userDocRef, {
        todo: arrayUnion({
          title: this.newTodo,
          task: this.newTask
        })
      });
      // 清空输入框
      this.newTodo = "";
      this.newTask = "";
      console.log("待办事项添加成功");
    } catch (error) {
      console.error("添加待办事项失败:", error.message);
    }
  }
}

关键细节说明 #

• 导入必要方法：需要提前从Firebase Firestore导入对应的API：

  import { doc, updateDoc, arrayUnion } from "firebase/firestore";
  

• arrayUnion的作用：该操作符会向数组中添加元素，且自动过滤重复项（如果业务允许重复，可直接拼接数组后用updateDoc覆盖，但不推荐此写法）。
• 增加登录校验：避免用户未登录时currentUser为null导致的报错。
• 输入合法性处理：用trim()过滤纯空格的无效输入。

内容的提问来源于stack exchange，提问作者Guru Pawar