我有一个关于如何更新Cloud Firestore中的数字字段的问题。我遵循一份官方文件，编写代码并不难。但它并没有像我想的那样起作用。似乎我没有正确地使用async和Wait。我现在还没有完全理解async和Wait，所以不知道我错过了什么。

GoodBad.jsx

import { useState } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';
// import { FaThumbsUp, FaRegThumbsUp } from "react-icons/fa";
import {updateDoc, getDoc, doc } from 'firebase/firestore';

import db from '../config/firebase';

const GoodBad = ({ quiz }) => {
  const [goodClicked, setGoodClicked] = useState(false);
  const [goodCounter, setGoodCounter] = useState(quiz.likes);

  // console.log(quiz.id, quiz.likes)

  const handleLikesUI = async (e) => {
    if (goodClicked === false) {
      setGoodClicked(true);
      setGoodCounter(prevState => prevState + 1);
    } else {
      setGoodClicked(false);
      setGoodCounter(prevState => prevState - 1);
    }

    const docRef = doc(db, "quizzes", quiz.id)
    const payload = {likes: goodCounter}
    await updateDoc(docRef, payload);
  };


  return (
    <div className='quizFooter'>
      <div
        className={
          goodClicked
            ? 'likesCounterContainer checked'
            : 'likesCounterContainer'
        }
        onClick={() => handleLikesUI(quiz)}
      >
        <span className='heartIcon'>
          {goodClicked ? <FaHeart /> : <FaRegHeart />}{' '}
        </span>
        <span className='likesNumber'>{goodCounter}</span>
        {/* <span onClick={handleDislikes}>{goodClicked ? <FontAwesomeIcon icon="fa-regular fa-thumbs-down" /> : <FontAwesomeIcon icon="fa-solid fa-thumbs-down" />}bad: {badCounter}, {badClicked}</span> */}
      </div>
    </div>
  );
};

export default GoodBad;