React+SpringBoot+Firebase注册时无法依次调用双API并跳转求助

我用React做前端，SpringBoot+Firebase做后端。用户注册时需要先调用Firebase API创建账号，再调用SpringBoot API把用户数据存到自有服务器。但现在Firebase API调用完成后，后续代码就停了，SpringBoot API根本没触发，导致没法完成双API顺序调用，也没法正常跳转页面。

React提交注册代码 #

const handleOnSubmit=(event: React.FormEvent<HTMLFormElement>)=> {
        if (password !== secondPassword) {
            setPasswordsMatched(false);
            console.log("passwords matched when password!==secondPassword:" + passwordsMatched);
        } else if(!username){
            setUsernameExists(false);
        }else if(!email){
            setEmailExists(false);
        }else if(!password||!secondPassword){
            setPasswordExists(false);
        }else{
            const subscribed = subscribedStatus ? "subscribed" : "unsubscribed";
            firebaseAuthServiceSignUpWithEmailAndPassword(username,email,password,subscribed,handleSignupSuccess);
        }
}

// Firebase注册成功后的回调，成功则跳转邮箱验证页
const handleSignupSuccess=(signupStatus:boolean)=>{
        setSignupSuccess(signupStatus);
        if(signupStatus){
            firebaseAuthServiceEmailVerification(setEmailVerificationSent);
            navigate("/verification-email");
        }
}

Firebase API代码 #

export const firebaseAuthServiceSignUpWithEmailAndPassword= (username:string,email: string, password: string, subscribed:string,callback: (isSuccess:boolean)=>void) =>{
    const auth = getAuth();
    createUserWithEmailAndPassword(auth, email, password)
        .then(async ( userCredential) => {
            const user = userCredential.user;
            await postAccount(username, email, password, user.uid, subscribed);
            callback(true);
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            callback(false);
        });
}

SpringBoot API调用代码 #

export const postAccount=(username:string,email:string,password:string,firebaseUid:string,subscribedStatus:string)=>{
    axios.post(`http://localhost:8080/user/${username}/${email}/${password}/${firebaseUid}/${subscribedStatus}`
    )
        .then((res)=>{

        }).catch((error)=>{
            console.log(error);
        })
}

问题核心是**postAccount函数没有返回Promise**，导致你在Firebase的then块里用await时，实际上是在等待一个undefined，代码会直接跳过等待，立刻执行callback(true)，触发页面跳转——这时候SpringBoot的请求可能还没发出去，或者还没完成。

修复步骤： #

1. 让postAccount返回Promise
   axios的post方法本身就返回Promise，只要在函数里加上return即可，这样await才能正确等待请求完成：

   export const postAccount=(username:string,email:string,password:string,firebaseUid:string,subscribedStatus:string)=>{
       // 加上return，返回axios请求的Promise
       return axios.post(`http://localhost:8080/user/${username}/${email}/${password}/${firebaseUid}/${subscribedStatus}`)
           .then((res)=>{
               console.log("SpringBoot存储用户成功", res);
           }).catch((error)=>{
               console.error("SpringBoot存储用户失败", error);
               // 抛出错误，让上层的await捕获这个失败
               throw error;
           })
   }
   

2. 捕获SpringBoot请求的错误
   在Firebase的then块里用try/catch包裹await postAccount，避免SpringBoot请求失败时，错误被吞掉导致流程异常：

   export const firebaseAuthServiceSignUpWithEmailAndPassword= (username:string,email: string, password: string, subscribed:string,callback: (isSuccess:boolean)=>void) =>{
       const auth = getAuth();
       createUserWithEmailAndPassword(auth, email, password)
           .then(async ( userCredential) => {
               const user = userCredential.user;
               try {
                   // 等待SpringBoot请求完成，失败则进入catch
                   await postAccount(username, email, password, user.uid, subscribed);
                   callback(true);
               } catch (springBootError) {
                   console.error("注册流程中断：SpringBoot存储失败", springBootError);
                   callback(false);
               }
           })
           .catch((firebaseError) => {
               console.error("注册流程中断：Firebase创建用户失败", firebaseError.code, firebaseError.message);
               callback(false);
           });
   }
   

3. 安全优化：不要在URL里传密码
   你现在把密码放在URL路径里，这会导致密码被浏览器历史、服务器日志等记录，非常不安全。建议改成用请求体传递参数：

   // 修改postAccount
   export const postAccount=(username:string,email:string,password:string,firebaseUid:string,subscribedStatus:string)=>{
       return axios.post(`http://localhost:8080/user`, {
           username,
           email,
           password,
           firebaseUid,
           subscribedStatus
       })
           .then((res)=>{
               console.log("SpringBoot存储用户成功", res);
           }).catch((error)=>{
               console.error("SpringBoot存储用户失败", error);
               throw error;
           })
   }
   

   对应的SpringBoot接口也要改成接收@RequestBody参数，而不是路径参数。

修复后流程： #

• Firebase创建用户成功 → 等待SpringBoot请求完成且成功 → 调用callback(true) → 触发页面跳转
• 任何一步失败（Firebase创建失败/SpringBoot存储失败）→ 调用callback(false) → 不跳转，控制台输出错误信息方便排查

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