Ожидался первый аргумент для collection() в виде CollectionReference, DocumentReference или FirebaseFirestore (Статус: 500) на Nuxt

Содержание

Вопрос или проблема
Ответ или решение
Шаги для устранения проблемы:
Пример исправленного кода магазина:

Вопрос или проблема

Я смотрю видео The Net Ninja (серия о Pinia и Firebase) на его канале YouTube, и у меня возникла проблема с частью Firebase, которая говорит (Ожидался первый аргумент для collection(), который бы был CollectionReference, DocumentReference или FirebaseFirestore). Как я могу решить эту проблему для этого файла?

firebase.client.jpg

import { defineStore } from 'pinia'
import { collection, addDoc, getDocs, deleteDoc, doc, updateDoc } from 'firebase/firestore'
import { format, differenceInDays } from 'date-fns'

export const useHabitStore = defineStore('habitStore', {
  state: () => ({
    habits: [],
  }),
  actions: {
    // получение всех привычек
    async fetchHabits() {
      const { $db } = useNuxtApp()

      const snapshot = await getDocs(collection($db, 'habits'))
      this.habits = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
    },

    // добавление новых привычек
    async addHabit(name) {
      const { $db } = useNuxtApp()

      const habit = {
        name,
        completions: [],
        streak: 0,
      }

      // добавление привычки в Firebase
      const docRef = await addDoc(collection($db, 'habits'), habit)

      // добавление привычки в хранилище Pinia 
      this.habits.push({ id: docRef.id, ...habit })
    },

    // обновление привычек
    async updateHabit(id, updates) {
      const { $db } = useNuxtApp()

      // обновление в Firebase
      const habitRef = doc($db, 'habits', id)
      await updateDoc(habitRef, updates)

      // обновление хранилища Pinia
      const index = this.habits.findIndex((habit) => habit.id === id)
      if (index !== -1) {
        this.habits[index] = { ...this.habits[index], ...updates }
      }
    },   

    // удаление привычек
    async deleteHabit(id) {
      const { $db } = useNuxtApp()

      // удаление в Firebase
      const docRef = doc($db, 'habits', id)
      await deleteDoc(docRef)

      // удаление из хранилища Pinia
      this.habits = this.habits.filter(habit => habit.id !== id)
    },

    // завершение дневной привычки
    toggleCompletion(habit) {
      const today = format(new Date(), 'yyyy-MM-dd')

      if (habit.completions.includes(today)) {
        habit.completions = habit.completions.filter(date => date !== today)
      } else {
        habit.completions.push(today)
      }

      habit.streak = this.calculateStreak(habit.completions)

      this.updateHabit(habit.id, {
        completions: habit.completions,
        streak: habit.streak
      })
    },

    // вычисление ряда привычек
    calculateStreak(completions) {
      const sortedDates = completions.sort((a, b) => new Date(b) - new Date(a))
      let streak = 0
      let today = new Date()

      for (const date of sortedDates) {
        const diff = differenceInDays(today, new Date(date))

        if (diff > 1) {
          break
        }
        
        streak += 1
        currentDate = new Date(date)
      }
      
      return streak
    },
  }
})

Ответ или решение

Ваша проблема связана с ошибкой, которая возникает при попытке передать неправильный аргумент в функцию collection() из библиотеки Firebase Firestore. Ошибка "Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore" указывает на то, что переданный аргумент $db не является корректным экземпляром базы данных Firestore.

Давайте разберемся в том, как правильно настроить и использовать $db в вашем коде для работы с Firestore в проекте Nuxt и Pinia.

Шаги для устранения проблемы:

Проверьте инициализацию базы данных:
Убедитесь, что Firestore инициализирован правильно и доступен через useNuxtApp(). Ваша инициализация должна выглядеть примерно так:

// В файле `plugins/firebase.js`
import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'

const firebaseConfig = {
 // Ваши конфигурационные данные Firebase
}

const app = initializeApp(firebaseConfig)
const db = getFirestore(app)

export default defineNuxtPlugin((nuxtApp) => {
 nuxtApp.provide('db', db)
})

Корректное использование $db в вашем магазине:
Вызов useNuxtApp() должен возвращать корректную ссылку на вашу инициализированную базу данных. В вашем коде убедитесь, что вы обращаетесь к $db:
```
async fetchHabits() {
 const { $db } = useNuxtApp()

 const snapshot = await getDocs(collection($db, 'habits')) // Проверка, что $db правильно передается
 // Остальная часть кода
}
```
Проверьте наличие ошибок при компиляции и загрузке:
Иногда ошибки могут возникать в ходе сборки проекта или если плагин не загружен. Убедитесь, что в консоли нет других ошибок, и попробуйте перезапустить сервер разработки.
Проверка версий библиотек:
Убедитесь, что используемые вами библиотеки Firebase и Pinia находятся в актуальном состоянии и совместимы друг с другом. Обновите их при необходимости.

Пример исправленного кода магазина:

Убедитесь, что в вашем хранилище habitStore корректно инициализирован db:

import { defineStore } from 'pinia'
import { collection, addDoc, getDocs, deleteDoc, doc, updateDoc } from 'firebase/firestore'
import { format, differenceInDays } from 'date-fns'

export const useHabitStore = defineStore('habitStore', {
  state: () => ({
    habits: [],
  }),
  actions: {
    async fetchHabits() {
      const { $db } = useNuxtApp()
      // Убедитесь, что $db является корректным экземпляром Firestore
      const snapshot = await getDocs(collection($db, 'habits'))
      this.habits = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
    },
    // Остальные действия...
  }
})

Следуя данным рекомендациям, вы сможете устранить указанную ошибку и обеспечить корректную работу с Firestore в вашем приложении на Nuxt и Pinia. Если проблема сохраняется, вам следует внимательно проверить все ссылки на $db и его инициализацию.