Reactjs 从React同时更新两个集合时Firebase数据不一致

我有一个React应用程序，我将数据存储在firebase中，并将这些数据用作我的应用程序中的状态。
我有两个收藏：
-一个用于存储卡数据

-第二个用于存储卡将呈现的位置和顺序（阵列中仅存储卡的ID） 第二集：

并且两者都作为状态使用

MapStateTops

但是，当我分派操作以添加新卡并同时更新两个集合（使用批写入）时，我不会获取刚刚更新的文档的ID，而只获取数据

这是我用来更新两个集合的函数

export const createTodo = (cardOrder,taskName) => {
return  (dispatch, getState, { getFirebase, getFirestore }) => {
    const firestore = getFirestore();
    var cardsColRef = firestore.collection("todos")
    var orderDocRef = firestore.collection("cardOrder").doc(taskName)
    var newCardRef = firestore.collection('todos').doc()
    var batch = firestore.batch()
    batch.set(newCardRef,{title : "",assignment:"",content: ""})
    batch.update(orderDocRef,{order:[...cardOrder,newCardRef.id]})
    batch.commit()}

批写入前的数据。

cardOrder:Array（3）
0:{id:“2”，顺序：数组（5）}
1:{id:“3”，顺序：数组（2）}
2:{id:“顺序”，顺序：数组（3）}

批量写入后的数据。

cardOrder:Array（3）
0:{顺序：数组（6）}
1:{id:“3”，顺序：数组（2）}
2:{id:“顺序”，顺序：数组（3）}

即使第一个集合也发生了变化，应用程序也不会重新呈现自身。 手动页面刷新后，所有内容都会显示并正常工作。

cardOrder:Array（3）
0:{id:“2”，顺序：数组（6）}
1:{id:“3”，顺序：数组（2）}
2:{id:“顺序”，顺序：数组（3）}

有人能帮忙吗？我找不到任何类似我的问题，我真的需要知道是否有解决这个问题的办法