React.js中遍历Firestore文档内对象并向bookChapters路径添加数据失败如何解决

• 你当前代码没有任何写入数据的逻辑：onSnapshot是Firestore的实时数据监听器，仅用于监听读取数据变化，不会执行新增/修改操作
• 异步逻辑处理错误：onSnapshot是异步回调，你在绑定监听器后直接同步dispatch成功，既没有等待逻辑执行，也没有实际触发写入，自然不会产生数据变更
• API调用逻辑错误：你调用doc()获取的是单个文档的引用，返回的是DocumentSnapshot，不能使用forEach遍历，forEach是集合查询返回的CollectionSnapshot才支持的方法
• 没有对异步操作加await关键字，async方法无法捕获异步抛出的异常

如果你的需求是向Users/{bookId}/bookChapters集合下，新增一个id为inputText的章节文档，修改后的代码如下：

export const createNewChapter = (bookId, inputText) => {
  return async dispatch => {
    dispatch(createNewChapterStart());
    try {
      // 执行写入操作：用set方法为指定id的文档写入字段内容
      await firebase
        .firestore()
        .doc(`Users/${bookId}/bookChapters/${inputText}`)
        .set({
          chapterName: inputText,
          createdAt: firebase.firestore.FieldValue.serverTimestamp()
          // 补充其他你需要存储的章节字段
        });
      dispatch(createNewChapterSuccess(inputText));
    } catch (error) {
      dispatch(createNewChapterFail(error));
      console.log(error);
    }
  };
};

• 如果你是要给已有文档内部的bookChapters数组/对象新增字段，可使用update方法配合arrayUnion等操作符实现，不需要全量读取再写入
• 操作前先确认Firestore安全规则已经开放了对应路径的写入权限，权限不足会导致写入静默失败
• 实时数据监听onSnapshot不要和写入逻辑混写，建议单独在组件的useEffect中绑定监听，组件卸载时记得取消订阅避免内存泄漏

内容的提问来源于stack exchange，提问作者Valerio Battilà