Firesbase firestore不工作+ Vuejs

npm install firebase

import { createApp } from 'vue';
import App from './App.vue';
import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);

const db = firebase.firestore();

createApp(App).mount('#app');

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import firebase from 'firebase/app';
import 'firebase/firestore';

export default {
  setup() {
    const items = ref([]);

    onMounted(async () => {
      const db = firebase.firestore();
      const snapshot = await db.collection('items').get();
      snapshot.forEach(doc => {
        items.value.push({ id: doc.id, ...doc.data() });
      });
    });

    return { items };
  }
};
</script>

try {
  const snapshot = await db.collection('items').get();
  snapshot.forEach(doc => {
    items.value.push({ id: doc.id, ...doc.data() });
  });
} catch (error) {
  console.error("Error fetching data: ", error);
}

npm update firebase vue