firestoreのデータ取得で無限ループになる

Question

<template>
<div>
{{getId({id:"1"})}}
</div>
</template>

<script>
export default {
methods: {
  async getId(item) {
    const items = await this.$store.dispatch('getId',item.id)
    return items;
  },
}
}
</script>

import firebase from 'firebase'

export default {
state: {
    db: null,
},

getters: {
  db(state) {
    if (state.db !== null) {
        return state.db;
    }
    const firebaseConfig = {
        apiKey: "********",
        authDomain: "********",
        databaseURL: "********",
        projectId: "********",
        storageBucket: "********",
        messagingSenderId: "********",
        appId: "********"
    };
      firebase.initializeApp(firebaseConfig);
      state.db = firebase.firestore();
      return state.db;
    },
}

actions: {
  async getId(context,id) {
      console.log(id)・・・①
      const items = await context.getters.db.collection("items").where("id", "==",id).get()
      const data = items.docs.map(doc => {
        return doc.data();
      });
      console.log("data表示",data)・・・②
      return data;
    },
}
}

①は適切なidつまり"1"が表示され、②は"id", "==",idとなる適切な配列がfirestoreから返ってくるのですが、①②ともに無限に表示される状況です。

エラーメッセージは以下の通り
[Vue warn]: You may have an infinite update loop in a component render function.

これはなぜでしょうか？どこが誤っているのでしょうか？