React.js中如何向Firestore文档的bookChapters对象新增带随机ID的嵌套数据

原有代码问题说明 #

• 使用了onSnapshot方法，该方法作用是实时监听文档数据变化，不属于写入数据的API
• 路径拼接时直接将章节名作为bookChapters下的文档ID，不符合自动生成随机ID的需求
• 没有等待写入操作完成就触发成功回调，会导致数据还没入库就提前执行后续逻辑

修正后代码实现 #

export const createNewChapter = (bookId, inputText) => {
  return async dispatch => {
    dispatch(createNewChapterStart());
    try {
      // 指向bookChapters集合，调用add方法会自动生成随机ID作为文档键
      const newChapterRef = await firebase
        .firestore()
        .collection(`Users/${bookId}/bookChapters`)
        .add({
          chapterName: inputText, // 存储传入的章节名称
          takeAways: {} // 初始化空的takeAways对象，后续可按需新增字段
        });
      
      // 回调可携带自动生成的章节ID，方便后续操作使用
      dispatch(createNewChapterSuccess({
        chapterId: newChapterRef.id,
        chapterName: inputText
      }));
    } catch (error) {
      dispatch(createNewChapterFail(error));
      console.error('新增章节失败：', error);
    }
  };
};

后续新增takeAways子数据说明 #

如果你后续需要往该章节的takeAways里新增带随机ID的条目，建议将takeAways设为子集合实现，示例逻辑如下：

// 给指定章节新增心得条目
const addNewTakeAway = async (bookId, chapterId, content) => {
  await firebase
    .firestore()
    .collection(`Users/${bookId}/bookChapters/${chapterId}/takeAways`)
    .add({
      content,
      createTime: firebase.firestore.FieldValue.serverTimestamp()
    })
}

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