Uncaught FirebaseError: Function CollectionReference.doc() requires its first argument to be of type non-empty string

Question

I'm setting up a react-redux-firestore app for learning purposes and I'm trying to delete an item from a collection in Firestore by referencing the id of the selected item. However, I came across this error when I'm trying to set up an option to delete items from a list, however, it throws the error: Uncaught FirebaseError: Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: a custom Object object. I have no problems in setting up a way to create the items. Any guidance on the delete option would be appreciated.

The page containing the list:

import React from 'react';
import { Redirect } from 'react-router-dom'
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import { connect } from 'react-redux'
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import { firestoreConnect } from 'react-redux-firebase';
import { compose } from 'redux'
import { deleteDiagnosis } from '../../store/actions/diagnosisActions';

const MedHistory  = (props) => {
    const { auth, medhistory, dispatchDeleteDiagnosis } = props;

    if (!auth.uid) return <Redirect to='/signin' />
        if (medhistory) {
  return (
          <Paper className="classespaper">
          <h3 className="centertextalign">Medical History</h3>
              <Grid container spacing={0}>
      <Table size="small">
        <TableHead>
          <TableRow>
            <TableCell>Past Diagnoses</TableCell>
            <TableCell>Year</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {medhistory && medhistory.map((medhistory) => (
            <TableRow key={medhistory.id}>
              <TableCell>{medhistory.diagnosis}</TableCell>
              <TableCell>{medhistory.year}</TableCell>
              <TableCell><button onClick={e=>dispatchDeleteDiagnosis(e, props.id)}>Delete</button></TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
              </Grid>
              </Paper>
  );
          }
          else {return (
              <h3>LOADING...</h3>
          )
}
}

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

const matchDispatchToProps = (dispatch) => {
    return {
        dispatchDeleteDiagnosis: (e, id) => {
            e.preventDefault()
            dispatch(deleteDiagnosis(id))
        }
    }
}

export default compose(
    connect(mapStateToProps, matchDispatchToProps),
    firestoreConnect([
        { collection: 'medhx' }
    ])
)(MedHistory);

diagnosisActions page:

export const deleteDiagnosis = (id) => {
     console.log("dispatch", id)
    return (dispatch, getState, { getFirestore }) => {
        const firestore = getFirestore();
      firestore.collection('medhx').doc(id)
        .delete()
        .then(() => {
          dispatch({ type: 'DELETE_DIAGNOSIS_SUCCESS', id })
        }).catch(err => {
          dispatch({ type: 'DELETE_DIAGNOSIS_ERROR', err })
      })
    }
  };

The console above throws an empty object as an output.

Reducer page:

const initState = {
    medhx: [
        {id: '1', diagnosis: 'cholecystectomy', year: '2000'},
        {id: '2', diagnosis: 'type 2 diabetes', year: '1998'},
        {id: '3', diagnosis: 'hypertension', year: '1992'}
    ]
}

const diagnosisReducer = (state = initState, action) => {
    switch (action.type) {
        case 'CREATE_DIAGNOSIS':
            console.log('created diagnosis', action.diagnosis)
            return state;
        case 'CREATE_DIAGNOSIS_ERROR':
            console.log('create diagnosis error', action.err)
            return state;
        case 'DELETE_DIAGNOSIS':
            console.log('delete diagnosis');
            return state;
        case 'DELETE_DIAGNOSIS_ERROR':
            console.log('delete diagnosis error', 'state: ', state, 'action: ', action.diagnosis);
            return state;
        default:
            return state;
        }
}

export default diagnosisReducer

EDIT: The errors are pointing at 3 different places - 1st

         firestore.collection('medhx').doc(id)

2nd

         dispatch(deleteDiagnosis(id))

3rd

   <TableCell><button onClick={e=>dispatchDeleteDiagnosis(e, props.id)}>Delete</button></TableCell>

Answer 1

Your deleteDiagnosis function is declared like this with one argument:

export const deleteDiagnosis = (id) => { ... }

But you are calling it with two arguments that don't match:

onClick={e=>dispatchDeleteDiagnosis(e, props.id)}

Maybe you should declare the function so that the first element is not the ID, so that id is actually just a string instead of an event object.

export const deleteDiagnosis = (e, id) => { ... }