Fetching from Firestore URL shows 404 - URL not right?

Question

I am using Next.js to fetch data from my Firestore Database, but I keep getting an error in the console, stating that GET (FirestoreDatabaseURL) 404 (not found).

When I try any other json database such as myfakestore or jsonplaceholder, my code works (I tried both getServerSideProps and fetching with UseState), works beautifully. But not from my own database. Tried with Postman, but it won't work either.

I have tried to find different ways to get the database URL, but I am only finding this one format:

https://PROJECTID.firebaseio.com

The server is in us-central, which also helps determine the URL. While testing around, I have gotten the error FetchError: invalid json response body at https://PROJECTID.firebaseio.com/ reason: Unexpected token F in JSON at position 0

Which I came to find out that it's not actually returning json, but HTML. Just for context, this is my working code:

const [showProducts, setShowProducts] = useState()
  const apiData = 'https://celeste-73695.firebaseio.com/'

  let displayProducts

  function pullJson () {
    fetch(apiData)
    .then(response => response.json())
    .then(responseData => {
      displayProducts = responseData.map(function(product){
        return (
          <p key={product.id}>{product.title}</p>
        )

      })
      console.log(responseData)
      setShowProducts(displayProducts)
    })
    //return
  }

  useEffect(() => {
    pullJson()
  },[])

And my firebase.js file

import firebase from 'firebase'; 
// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {
    apiKey: "***",
    authDomain: "***",
    projectId: "***",
    storageBucket: "***",
    messagingSenderId: "***",
    appId: "***",
    measurementId: "***"
  };

  const app = !firebase.apps.length 
    ? firebase.initializeApp(firebaseConfig)
    : firebase.app();
  const db = app.firestore();

  export default db;

Can anybody point me in the right direction? Thanks in advance.

Rohit Kharche · Accepted Answer · 2022-11-25T08:24:04.527

The databaseURL property is for the Firebase Realtime Database, which you probably didn't create yet. The databaseURL property is not necessary to use Firestore though, so you should be able to access that with just the configuration data you have.

You may have created the realtime database but not have configured it with firebase config. I recommend you to go through this documentations for the realtime database.

To configure the firebase firestore you need to do the following:

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

const firebaseConfig = {
    // ...
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Cloud Firestore and get a reference to the service
const db = getFirestore(app);

And make sure to export the db reference as will be used in your project. After that you can start using the firestore like documented here as you have tried to use it with URL you may have to change the implementation for using it like shown in above documentations

Thank you for your reply, I appreciate your time. The database I have set up is a Cloud Firestore database. This was done deliberately, as I don't require Realtime Databasing for this project. I do not currently use the databaseURL property in the config file, and since I didn't set up the Realtime Database, the config file above does not include it. The reason why I am trying to use the Firestore Database URL, is to include it in the fetch code. If there is a better way, I highly appreciate you pointing me in the right direction, as I haven't found it yet. Thanks again! — nelakay, Nov 25 '22 at 09:57

Fetching from Firestore URL shows 404 - URL not right?

1 Answers1