Firestore document id missing after document update

Question

I'm trying to practice creating something similar to reddit using ReactJs and Firestore. When the upvote button is clicked post's score in its Firestore document is updated, somehow when React refetches the documents, the id is missing.

Here's a picture of the log - notice the first item in the second log, the score increased by 1 but the id in that item is missing :/ Whereas the second item, which i did not upvote, still has its id intact. However, if i upvote the second item, its id would disappear too.

My parent component:

import React, { Component } from 'react';
import { firestoreConnect, isLoaded } from 'react-redux-firebase';
import { connect } from 'react-redux';
import { compose } from 'redux';

import { upVote } from '../../Store/Actions/PostAction';

import PostCardV2 from '../PostCard/PostCardV2';
import AuthCard from '../Auth/AuthCard';
import SignedInCard from '../Auth/SignedInCard';


class Dashboard extends Component {

  render() {
    const { posts, auth } = this.props;
    console.log(posts); // here is where i console logged
    const list = posts && posts.map(post => {
      return(
        <PostCardV2 key={post.id} post={post} upVoted={()=>this.props.upVote(post.id, post.score)}/> //upvote is a dispatch function
      );
    })


    if(!isLoaded(auth)) {
      var rightBar = <p>Loading</p>
    } else {
      if (!auth.uid) {
        rightBar = <AuthCard/>
      } else {
        rightBar = <SignedInCard userName={auth.email}/>
      }
    }

    return(
      <div className='container'>
        <div className='row'>
          <div className='col s8'>
            {list}
          </div>
          <div className='col s4 sticky'>
            {rightBar}
          </div>
        </div>
      </div>
    );

  }

}

const mapStateToProps = (state) => {
  return {
    auth: state.firebase.auth,
    posts: state.firestore.ordered.posts
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    upVote: (id, score) => dispatch(upVote(id, score))
  }
}

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  firestoreConnect([
    { collection: 'posts', orderBy: ['score', 'desc']}
  ])
)(Dashboard);

my child PostCardV2 component:

import React from 'react';

const PostCardV2 = (props) => {

  const {imgUrl, title, content, score} = props.post;

  return (
    <div className='row'>
      <div className='col s12'>
        <div className='card'>
          <div className='card-image'>
            <img src={imgUrl}/>
          </div>
          <div className='card-content row'>
            <div className='col s2'>
              <div className='center' onClick={props.upVoted}>
                <i className='small material-icons pointer-cursor'>arrow_drop_up</i>
                <p>{score}</p>
              </div>
            </div>
            <div className='col s10'>
              <span className="card-title">{title}</span>
              <p>{content}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default PostCardV2;

and my dispatch function:

export const upVote = (id, score) => {
  return (dispatch, getState) => {
    const newScore = score + 1;
    firebase.firestore().collection('posts').doc(id).update({
      score: newScore,
    })
  }
}

Answer 1

You thunk is not a thunk, you are never using the dispatch function so you could just rewrite it as:

export const upVote = (id, score) =>
    firebase
    .firestore()
    .collection('posts')
    .doc(id)
    .update({
      score: score + 1,
    })

To eliminate the possibility that this is related to the thunk try replacing it with:

export const upVote = (id, score) =>
    firebase
    .firestore()
    .collection('posts')
    .doc(id)
    .set({
      score: score + 1,
    }, {merge: true})

This should have the exact same behaviour. If it does then we know the updating is not the problem.

Next, can you try logging what happens if you switch to:

export const upVote = (id, score) =>
    firebase
    .firestore()
    .collection('posts')
    .doc(id)
    .update({
      id,
      score: score + 1,
    })