如何在async函数执行完成后同步执行后续函数？解决执行顺序问题

你的核心问题是错误地在then里直接执行了函数，导致dispatch和setUser在updateDoc异步操作完成前就被调用了，同时因为传递给then的不是函数，引发了类型错误。

错误原因拆解 #

你写的.then(dispatch(SET_USER(null)))，是直接运行dispatch(SET_USER(null))，然后把这个调用的返回值传给then——但then需要接收一个待执行的回调函数，而不是立即执行的结果。这就导致两个问题：

1. dispatch和setUser同步触发，完全不等updateDoc完成
2. 如果dispatch的返回值不是函数，then会因为无法处理非函数参数抛出错误（就是你看到的indexOf未定义错误）

正确实现方式 #

方式一：用await顺序执行（最直观）

既然已经用了async/await，直接按顺序写就行，await会等待updateDoc完成后，再执行后面的代码：

const asyncFunc = async() => {
  try{
    // 等待updateDoc异步操作完成
    await updateDoc(doc(db, "users", user.id), {token: null});
    // 完成后再依次执行两个函数
    dispatch(SET_USER(null));
    setUser(null);
  } catch(error) {
    console.log("ERROR -->", error);
  }
}
asyncFunc();

方式二：正确使用then链式调用

如果想用then，要把后续逻辑包装成函数传给then，确保只有当updateDoc完成时才执行：

const asyncFunc = () => {
  updateDoc(doc(db, "users", user.id), {token: null})
    // 这里传的是一个函数，updateDoc完成后才会调用它
    .then(() => {
      dispatch(SET_USER(null));
      setUser(null);
    })
    .catch(error => {
      console.log("ERROR -->", error);
    });
}
asyncFunc();

两种方式都能保证updateDoc执行完成后，才会触发dispatch和setUser，完全符合你的需求。

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