Reactjs 如何使用React防止并发注册并处理Firestore数据库中的插槽可用性

我正在开发一个网络应用程序，用户可以在其中报名选修科目，每个选修科目的可用名额有限.我遇到了一个问题，即使只有一个可用的插槽，多个用户也可以同时注册.

const handleApprove = async () => {
  if (isEnrolled || isConfirming) {
    return; 
  }

  setIsConfirming(true);

  const shouldEnroll = window.confirm("Are you sure you want to enroll?");

  setIsConfirming(false);

  if (shouldEnroll) {
    try {
      const firestore = firebase.firestore();
      const electiveRef = firestore.collection("electives").doc(project.id);
      const userRef = firestore.collection("users").doc(user.uid);

      await firestore.runTransaction(async (transaction) => {
        const electiveDoc = await transaction.get(electiveRef);
        if (!electiveDoc.exists) {
          throw new Error("Elective document does not exist!");
        }

        const electiveData = electiveDoc.data();
        const updatedSlots = electiveData.slots - 1;

        if (updatedSlots >= 0) {
         
          const updatedElectiveDoc = await transaction.get(electiveRef);
          const updatedElectiveData = updatedElectiveDoc.data();
          const remainingSlots = updatedElectiveData.slots;

          if (remainingSlots >= 0) {
            
            transaction.update(electiveRef, { slots: updatedSlots });

  
            await userRef.update({
              isEnroll: true,
              elective: project.name,
              subjectCode: project.details,
            });
            
            logout();
            setIsEnrolled(true);
          } else {
            alert("No available slots for enrollment in this elective.");
            setIsEnrolled(false); // Reset isEnrolled if enrollment fails
          }
        } else {
          alert("No available slots for enrollment.");
          setIsEnrolled(false); // Reset isEnrolled if there are no available slots
        }
      });
    } catch (error) {
      console.error("Error enrolling:", error);
      alert("An error occurred while enrolling. Please try again.");
      setIsEnrolled(false); // Reset isEnrolled if enrollment fails
    }
  }
};

当只有一个可用插槽时，多个用户仍然可以注册，即使没有插槽，用户也可以注册. 我需要确保:

1. 当只有一个可用插槽时，也只有一个用户可以注册，即使他们完全同时注册.
2. 当没有可用插槽时，用户将无法注册.

我预计，通过使用Firerestore事务，当只有一个可用插槽时，只有一个用户能够注册，而当没有可用插槽时，用户将被阻止注册.我判断了在线解决方案，每条帖子都告诉我要实现交易.