Search code examples
javascriptfirebasegoogle-cloud-firestorefirebase-tools

Firestore setDoc not creating document

Trying to send the post data(title, text, etc.) to firestore when the user clicks 'Post' button. For that, I'm using await setDoc() function.

I'm expecting to see the post data in the firestore emulator, but it isn't showing any.

After I click the Post button, it doesn't navigate to the home page. But when I manually navigate to the home page, I can see the post, which means the post data is properly dispatched through redux.

It doesn't seem to return any error message, but the code after the await setDoc() isn't implemented. Following is the code.

This question seems to be the same issue as mine, but the solution(adding .catch((e) => { console.log(e); }) after the setDoc()) doesn't seem to show any error message in the console.

//firebase.js
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: String(process.env.REACT_APP_FIREBASE_API_KEY),
  authDomain: String(process.env.REACT_APP_FIREBASE_AUTH_DOMAIN),
  projectId: String(process.env.REACT_APP_FIREBASE_PROJECT_ID),
  storageBucket: String(process.env.REACT_APP_FIREBASE_STORAGE_BUCKET),
  messagingSenderId: String(process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID),
  appId: String(process.env.REACT_APP_FIREBASE_APP_ID),
  measurementId: String(process.env.REACT_APP_FIREBASE_SENDER_ID)
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);
connectAuthEmulator(auth, "http://localhost:9099");
export {
  auth,
  db,
}
export default app;


//CreatePost.tsx
...
import { doc, setDoc } from "firebase/firestore"; 
import { db } from '../firebase';
...
const handlePostClick = async () => {
    const postData: PostType = {
        postId: postId,
        title: title,
        text: text,
        voteCount: 0
      };
      try {
        // Dispatch an action to submit the post data
        dispatch(postSubmit(postData));
        // Save the post data to Firestore
        await setDoc(doc(db, "posts", postId), postData);
        // Reset the form fields
        setTitle('');
        setText('');
      
        // Navigate to the desired component
        navigate('/');
      } catch (error) {
        console.error('Error saving post to Firestore:', error);
      }
  };

FYI, I'm using "firebase": "^9.22.0", "react": "^18.2.0", "redux": "^4.2.1" and "redux-firestore": "^2.0.1".

Any help would be much appreciated. Thanks in advance!

Solution

  • TLDR;

    1. Make sure you connect the app to Firestore emulator using connectFirestoreEmulator.
    2. Check firestore.rules if the rule is allow read, write: if true;.

    I had to add connectFirestoreEmulator(db,'0.0.0.0', 8080) in firebase.js, and edit the firestore rules. Below is the modified code.

    //firebase.js
...

const firebaseConfig = {
  ...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);
connectAuthEmulator(auth, "http://localhost:9099");
connectFirestoreEmulator(db,'0.0.0.0', 8080) // Added this part
...

//firestore.rules
rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}