Help Needed: Next.js App in Firebase Studio Fails to Fetch Firestore Data - Setting Up Blog

General
1

Hello Firebase Community,

I’m a novice coder nearing the launch of a project I’ve been building for months in Firebase Studio. I’m facing a persistent issue that has me completely stuck, and after a full day of trying to fix it, I’m hoping someone here can point me in the right direction.

The Problem:

My Next.js application has a blog page (/blog) that is supposed to display posts from a Firestore collection named blogPosts. However, the page consistently shows a “No blog posts yet!” message, even though I have added several documents to the collection via the Firebase Console. I’m working entirely within the Firebase Studio web browser environment, so all my development and database management happens there.

What I’m Seeing:

No blog posts yet!

It looks like you haven’t added any posts to your Firestore ‘blogPosts’ collection,
or there might be an error fetching the data (check the developer console for an index creation link).

  1. The /blog page loads, but it displays the “no posts” message.

  2. In the Firebase Studio “Application Logs” panel, I frequently see this error when the page loads:

    Firestore (11.7.3): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=invalid-argument]: 3 INVALID_ARGUMENT: Invalid resource field value in the request.

What I’ve Done:

I have confirmed multiple times that there is data in my blogPosts collection in Firestore. Each document has fields like title, slug, content, publishedAt (timestamp), etc.

My AI coding partner has helped me try several fixes, but none have worked:

  • We’ve simplified the Firestore query in the code to be a basic getDocs(collection(db, 'blogPosts')).

  • We’ve changed the Firestore security rules multiple times. The current rule is:

    rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /blogPosts/{document=**} {
      allow read: if true;
    }
  }
}

  • We’ve updated Next.js dependencies and resolved configuration file issues (next.config.js).

Despite all this, the INVALID_ARGUMENT error persists, and the posts do not appear. As a beginner with ADHD/autism, the process has been very confusing, and I’m not sure what I’ve done wrong. I just want to be able to add and see my blog posts on the site.

Could anyone please explain in simple terms what might be causing this INVALID_ARGUMENT error in the context of Firebase Studio and a simple Firestore getDocs query? Is there a common setup step I might have missed?

Thank you so much for your help. I’m so close to launching and this is the last major hurdle.