Vue/Firestore/Firebase error on retrieve data

Question

I am creating a Vue JS app with Firestore database but have a problem somewhere in the Firestore import (probably). Its a simple app just storing some employee details which want to be displayed (initially) to test its working. (It doesnt!) Its just using "firebase": "^5.0.4", not vue-firebase or other plugin.

Its Firestore not the Firebase Real Time db.

So in the firebaseInit.js config file are all the basic config options which are as below

import * as firebase from 'firebase'
// Initialize Firebase
var config = {
  apiKey: "AIzaSyCyKS3QxqtR9HvetpT2vWKFNxa_yeRKdhA",
    authDomain: "vuefsprod-fc778.firebaseapp.com",
    databaseURL: "https://vuefsprod-fc778.firebaseio.com",
    projectId: "vuefsprod-fc778",
    storageBucket: "vuefsprod-fc778.appspot.com",
    messagingSenderId: "1048509841840"
}
firebase.initializeApp(config)

var auth = firebase.auth()
var db = firebase.database()

export function signOut (callback) {
  auth.signOut().then(value => {
    callback()
  }, err => { callback(err) })
}
export default 'firebase/firestore'

And then the script snippet to test it is as below (in Helloworld.vue)

import db from '../firebaseInit'
  export default {
    name: 'home',
    data () {
      return {
        employees: [],
        loading: true
        }
      },
      created() {
       db.collections('employees').get().then(querySnapshot => {
       querySnapshot.forEach(doc => {
       console.log(doc)
       const data = {

       }
       })
       })
      }
    }

Yarn compiles the app which displays, but there is a warning error in console as below

[Vue warn]: Error in created hook: "TypeError: __WEBPACK_IMPORTED_MODULE_0__firebaseInit__.a.collections is not a function"

found in

---> <Home> at src/components/HelloWorld.vue

and no data is displayed to the console, there are 6 items in the employees collection.

I'm also wondering where the "a" in a.collections comes from.

Any tips on this or a better way of doing it, say with vue-firebase or other, are more than welcome. Screenshot below.

Many Thanks

Renaud Tarnec Renaud Tarnec · Accepted Answer · 2018-06-06T17:18:24

You are declaring the database with the Real Time Database (RTDB) service, instead of the Firestore service:

var db = firebase.database()  // <- RTDB

You should do the following instead:

var db = firebase.firestore()

Since the RTDB does not have collections, you receive the error "collections is not a function"

FYI, the different available services are documented here: https://firebase.google.com/docs/web/setup#use_firebase_services, together with how to access/declare them.

Vue/Firestore/Firebase error on retrieve data

2 Answers