如何在React + Firebase中删除在创建时已被赋予唯一id的列表项？

import React, { useState, useEffect } from 'react';
import firebase from 'firebase/app';
import 'firebase/database';

const List = () => {
  const [listItems, setListItems] = useState([]);

  useEffect(() => {
    // 获取列表数据
    const fetchData = async () => {
      const snapshot = await firebase.database().ref('listItems').once('value');
      const data = snapshot.val();
      if (data) {
        const items = Object.keys(data).map((key) => ({ id: key, ...data[key] }));
        setListItems(items);
      }
    };

    fetchData();
  }, []);

  const handleDelete = async (id) => {
    try {
      // 删除列表项
      await firebase.database().ref(`listItems/${id}`).remove();
      // 更新列表数据
      const updatedItems = listItems.filter((item) => item.id !== id);
      setListItems(updatedItems);
    } catch (error) {
      console.log('删除失败', error);
    }
  };

  return (
    <ul>
      {listItems.map((item) => (
        <li key={item.id}>
          {item.name}
          <button onClick={() => handleDelete(item.id)}>删除</button>
        </li>
      ))}
    </ul>
  );
};

export default List;