Firebase 9表单提交触发proactiveRefresh无限循环错误求助

问题根源 #

你遇到的错误是因为把整个auth.currentUser对象直接存入了Firebase Realtime Database。这个User对象内部存在循环引用结构（比如user.proactiveRefresh.user会递归指向自身），Firebase写入数据时会递归遍历对象属性，最终触发"超过最大写入深度（32层）"的报错。

另外代码里还有两个小问题：

• console.long是笔误，正确写法是console.log
• File对象不能直接存入Realtime Database，数据库仅支持存储JSON兼容类型（字符串、数字、对象、数组等），文件需要先上传到Firebase Storage，再把生成的下载URL存入数据库。

修复后的代码 #

export function create() {
  createForm.addEventListener('submit', (e) => {
    e.preventDefault();
    
    // 获取表单输入值
    const Name = createForm["nameInput"].value;
    const Description = createForm["descriptionInput"].value;
    const Ingredients = createForm["ingredientsInput"].value;
    const Instructions = createForm["instructionsInput"].value;
    const Tags = createForm["tagInput"].value;
    const File = createForm["fileInput"].files[0];
    const TimeStamp = new Date().getTime();
    const User = auth.currentUser;

    // 未登录跳转登录页，终止后续代码执行
    if(User == null){
      window.location.href = "login.html";
      document.getElementById("create-form").reset();
      return;
    }
    
    const Uid = User.uid;
    // 只存用户的具体属性，比如displayName或email，不要存整个User对象
    const Username = User.displayName || User.email;

    const recipeRef = ref(db, "recipes");
    const newRecipeRef = push(recipeRef);

    // 处理文件上传（如果有图片）
    let imageURL = "";
    if (File) {
      // 上传到Firebase Storage，需提前初始化Storage
      const storageRef = ref(storage, `recipes/${TimeStamp}_${File.name}`);
      uploadBytes(storageRef, File).then((snapshot) => {
        getDownloadURL(snapshot.ref).then((url) => {
          imageURL = url;
          writeRecipeData();
        });
      }).catch((error) => {
        console.error("文件上传失败:", error);
      });
    } else {
      writeRecipeData();
    }

    // 统一写入数据库的逻辑
    function writeRecipeData() {
      set(newRecipeRef, {
        name: Name,
        description: Description,
        imageURL: imageURL,
        ingredients: Ingredients,
        instructions: Instructions,
        tags: Tags,
        timeStamp: TimeStamp,
        uid: Uid,
        username: Username,
      })
      .then(() => {
        console.log("数据已成功写入数据库");
        alert("🍕 表单提交成功！");
        document.getElementById("create-form").reset();
        window.location.href = "displayTest.html";
      })
      .catch((error) => {
        console.error("写入数据库失败:", error);
      });
    }
  });
  console.log("初始化完成");
}

关键修复点 #

• 避免存入整个User对象：只提取你需要的字段（比如displayName、email）存入username
• 修正console方法：把console.long改成console.log
• 正确处理文件：通过Firebase Storage上传文件，再将下载URL存入Realtime Database
• 添加return语句：未登录跳转后终止后续代码，避免无效逻辑运行

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