为何try-catch块无法捕获writeData抛出的Firebase写入错误？

你的writeData函数虽然声明了async，但内部调用Firebase的set方法后，没有返回这个异步操作的Promise。这就导致外层await拿到的是一个默认resolve的空Promise，而set抛出的错误属于独立的未关联Promise，根本传不到外层的try-catch里，所以控制台会出现“Uncaught (in promise) Error”，但setFormError根本不会执行。

方案1：用async/await简化逻辑（推荐） #

把writeData里的.then/.catch换成try-catch，直接等待set操作完成，确保错误能正确传递：

import { getDatabase, ref, set } from 'firebase/database';
import { v4 as uuidv4 } from 'uuid';

const writeData = async (table, data, id) => {
  const db = getDatabase();
  const itemPath = id ? `${table}/${id}` : `${table}/${uuidv4()}`;
  try {
    const result = await set(ref(db, itemPath), { ...data });
    return result;
  } catch (error) {
    console.error(error);
    throw error; // 重新抛出错误，让外层try-catch捕获
  }
};

export { writeData };

方案2：返回Promise链 #

如果习惯用.then/.catch写法，只要确保把set的整个Promise链返回给调用者就行：

import { getDatabase, ref, set } from 'firebase/database';
import { v4 as uuidv4 } from 'uuid';

const writeData = (table, data, id) => {
  const db = getDatabase();
  const itemPath = id ? `${table}/${id}` : `${table}/${uuidv4()}`;
  // 关键：返回这个Promise链
  return set(ref(db, itemPath), { ...data })
    .then((r) => r)
    .catch((error) => {
      console.error(error);
      throw error; // 重新抛出，让外层捕获
    });
};

export { writeData };

修改后，外层onSubmit里的try-catch就能正常捕获到writeData的错误，执行setFormError(true)的逻辑，同时控制台不会再出现未捕获的Promise错误。

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