FirebaseError: Expected type 'Query', but it was: a custom Object object

Question

I am completely new to Firebase and Firestore (as well as React). I made a Firebase project and added some test data to a Firestore database. Now I want to query Firestore for that data and display it somewhere. However, currently, my web app gives the error "FirebaseError: Expected type 'Query', but it was: a custom Object object".

The following is what I've done so far:

• Made a firebase.js file where I imported initializeApp, getFirestore, collection, and getDocs.
  • I also pasted the const firebaseconfig = {} stuff into this file.
  • I also made app, db, and colRef constants and exported them.

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

// init service
const db = getFirestore(app);

// collection reference
const colRef = collection(db , "songs")

export default {app, db, colRef};

• My Index.js file:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { getDocs } from "firebase/firestore";
import colRef from "./firebase.js";

const snapshot = getDocs(colRef);
console.log(snapshot.docs);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Previous questions about this error involved not using a collection reference as an argument to getDocs, as well as something called "angular". I'm using colRef as my argument to getDocs(), which is a collection, and I'm not using Angular.

How can I fix this error? Additionally, does this mean that it is attempting to search through my firestore, at least? How can I verify that I even did everything right to connect the web app to firestore?

I have no idea what to try - I switched out colRef for "songs" and that gave a different error. That's not a good idea, though, since index.js doesn't know what database to look for "songs" in.

Putting this code in the firebase.js file gets rid of the error, but nothing happens, either.

Answer 1

I think you want:

import { colRef } from "./firebase.js";

Instead of

import colRef from "./firebase.js";