Nuxt•4w ago

Weird firebase error

Expected first argument to collection() to be a CollectionReference, a DocumentReference or Firebase plugins/firebase.client.js

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from "firebase/firestore"

export default defineNuxtPlugin(() => {
  const firebaseConfig = {
  // api keys...

// Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);

  const db = getFirestore(app)

  return {
    provide: {
      firebaseApp: app,
      db,
    }
  }
})

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from "firebase/firestore"

export default defineNuxtPlugin(() => {
  const firebaseConfig = {
  // api keys...

// Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);

  const db = getFirestore(app)

  return {
    provide: {
      firebaseApp: app,
      db,
    }
  }
})

stores/posts.ts

import {defineStore} from 'pinia'
import {addDoc, collection, getDocs} from 'firebase/firestore'
import { v4 as uuidv4 } from 'uuid';

export const usePostStore = defineStore('postStore', {
  state: () => ({
    posts: [],
  }),
  actions: {
    async fetchPosts(){
      const {$db} = useNuxtApp()

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

    async addPost(postData){
      const {$db} = useNuxtApp()

      let id = uuidv4()
      const post = {
        hash_id: id,
        creationDate: "21-11-2024",
        title: postData.title,
        location: postData.location,
        schedule: postData.schedule,
        shift: postData.shift,
        description: postData.description
      }

      try {
        const docRef = await addDoc(collection($db, "posts"), post);
        this.posts.push({ id: docRef.id, ...post });
      } catch (error) {
        console.error("Error adding post:", error);
      }
      console.log($db);
    }
  }
})

import {defineStore} from 'pinia'
import {addDoc, collection, getDocs} from 'firebase/firestore'
import { v4 as uuidv4 } from 'uuid';

export const usePostStore = defineStore('postStore', {
  state: () => ({
    posts: [],
  }),
  actions: {
    async fetchPosts(){
      const {$db} = useNuxtApp()

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

    async addPost(postData){
      const {$db} = useNuxtApp()

      let id = uuidv4()
      const post = {
        hash_id: id,
        creationDate: "21-11-2024",
        title: postData.title,
        location: postData.location,
        schedule: postData.schedule,
        shift: postData.shift,
        description: postData.description
      }

      try {
        const docRef = await addDoc(collection($db, "posts"), post);
        this.posts.push({ id: docRef.id, ...post });
      } catch (error) {
        console.error("Error adding post:", error);
      }
      console.log($db);
    }
  }
})

5 Replies

kapa.ai•4w ago

Hi @suhaylmv. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your code snippets and the error message you're encountering, it seems you're facing an issue with Firebase initialization in your Nuxt 3 application. Let's address this problem step by step. 1. First, the error message suggests that the collection() function is not receiving a valid Firestore reference. This often happens when the Firestore instance is not properly initialized or accessed. 2. In your plugins/firebase.client.js, you're correctly initializing Firebase and Firestore. However, the way you're providing these instances to the rest of your application might be causing issues. 3. In your stores/posts.ts, you're trying to access the Firestore instance using const {$db} = useNuxtApp(). This approach might not work as expected in Nuxt 3, especially if the Firebase plugin hasn't been fully initialized when the store is created. To resolve this issue, I recommend the following changes: 1. Modify your Firebase plugin to return the Firestore instance directly:

// plugins/firebase.client.js
export default defineNuxtPlugin(() => {
  // ... (your existing Firebase initialization code)

  return {
    provide: {
      db: getFirestore(app)
    }
  }
})

// plugins/firebase.client.js
export default defineNuxtPlugin(() => {
  // ... (your existing Firebase initialization code)

  return {
    provide: {
      db: getFirestore(app)
    }
  }
})

2. In your store, access the Firestore instance using useNuxtApp().$db:

// stores/posts.ts
import { defineStore } from 'pinia'
import { addDoc, collection, getDocs } from 'firebase/firestore'
import { v4 as uuidv4 } from 'uuid';

export const usePostStore = defineStore('postStore', {
  state: () => ({
    posts: [],
  }),
  actions: {
    async fetchPosts() {
      const db = useNuxtApp().$db

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

    async addPost(postData) {
      const db = useNuxtApp().$db
let id = uuidv4()
      const post = {
        hash_id: id,
        creationDate: "21-11-2024",
        title: postData.title,
        location: postData.location,
        schedule: postData.schedule,
        shift: postData.shift,
        description: postData.description
      }

      try {
        const docRef = await addDoc(collection(db, "posts"), post);
        this.posts.push({ id: docRef.id, ...post });
      } catch (error) {
        console.error("Error adding post:", error);
      }
    }
  }
})

// stores/posts.ts
import { defineStore } from 'pinia'
import { addDoc, collection, getDocs } from 'firebase/firestore'
import { v4 as uuidv4 } from 'uuid';

export const usePostStore = defineStore('postStore', {
  state: () => ({
    posts: [],
  }),
  actions: {
    async fetchPosts() {
      const db = useNuxtApp().$db

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

    async addPost(postData) {
      const db = useNuxtApp().$db
let id = uuidv4()
      const post = {
        hash_id: id,
        creationDate: "21-11-2024",
        title: postData.title,
        location: postData.location,
        schedule: postData.schedule,
        shift: postData.shift,
        description: postData.description
      }

      try {
        const docRef = await addDoc(collection(db, "posts"), post);
        this.posts.push({ id: docRef.id, ...post });
      } catch (error) {
        console.error("Error adding post:", error);
      }
    }
  }
})

These changes should resolve the "Expected first argument to collection() to be a CollectionReference, a DocumentReference or Firebase" error by ensuring that you're correctly accessing the Firestore instance. If you're still encountering issues, it might be helpful to add some debug logging to verify that the Firestore instance is being correctly initialized and provided to your application. You can do this by adding console logs in your Firebase plugin and in the store actions. For more information on using Firebase with Nuxt 3, you might want to check out this Stack Overflow answer (https://stackoverflow.com/questions/78383589) which provides a detailed example of initializing Firebase and using Firestore in a Nuxt 3 application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@460711970182660116> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Adi_•4d ago

Personally, I am using nuxt-vuefire. Your firebase config will directly move into nuxt.config. And you can access the db anywhere using useFirestore() @suhaylmv 👆

suhaylmvOP•3d ago

I will try it out, thankss

Adi_•3d ago

wlc, let me know if you need anything else 😁

Gaming

Programming

Weird firebase error