Firestore无法保存React应用提交的数据，仅控制台开启时偶尔生效

先看你代码里的小问题：await 和 .then() 混用完全没必要，虽然语法上不报错，但会让异步逻辑变混乱，先把这个改了，代码更清晰。

核心问题是「仅控制台开启时才能成功提交」，这大概率是表单提交时没有阻止页面默认刷新行为——当你提交表单，如果没阻止默认动作，浏览器会立刻刷新页面，中断Firestore的请求；而打开控制台（尤其是开启Performance或Network面板时），浏览器会有延迟刷新的机制，刚好让请求完成。

接下来按步骤排查解决：

1. 修复表单提交的默认行为 #

如果你的添加按钮是放在<form>里，或者用了表单的提交事件，一定要在处理函数里加e.preventDefault()：

const handleSubmit = (e) => {
  e.preventDefault(); // 关键：阻止页面刷新
  addNewItem(title, description, repetition);
};

没有这行的话，页面刷新会直接中断异步请求，导致数据无法写入，这是触发你这个问题最常见的原因。

2. 简化异步函数的写法 #

把await和.then()的混用去掉，改成更清晰的异步逻辑：

const addNewItem = async (titleValue, descriptionValue, repetitionValue) => {
  try {
    await addDoc(routineCollectionRef, {
      title: titleValue,
      description: descriptionValue,
      repetition: repetitionValue
    });
    console.log('数据添加成功'); // await之后直接执行，不用then
  } catch (error) {
    console.error('添加失败:', error);
  }
};

3. 排查React严格模式的影响 #

React 18的开发环境严格模式会双重执行组件和effect，如果你的集合引用是在组件内部创建的（虽然你说导入了，但可以确认下），或者添加逻辑依赖了某些状态的重复触发，可能会导致请求被中断。可以暂时关闭index.js里的<StrictMode>标签测试，如果问题消失，再调整代码避免重复触发。

4. 确认Firestore的离线同步 #

如果开启了Firestore的离线持久化，可以检查下是否有同步延迟：

// 初始化Firestore时确认持久化设置
import { initializeApp } from "firebase/app";
import { getFirestore, enableIndexedDbPersistence } from "firebase/firestore";

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

enableIndexedDbPersistence(db)
  .catch((err) => {
    if (err.code === 'failed-precondition') {
      console.log('多个标签页打开，离线持久化无法启用');
    } else if (err.code === 'unimplemented') {
      console.log('浏览器不支持离线持久化');
    }
  });

不过这个情况一般不会只在控制台开启时生效，优先级低于前面的表单默认行为问题。

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