Uncaught FirebaseError: Функция CollectionReference.do c () требует, чтобы ее первый аргумент имел тип непустой строки

Question

Я настраиваю приложение response-redux-firestore для учебных целей и пытаюсь удалить элемент из коллекции в Firestore, ссылаясь на идентификатор выбранного элемента. Тем не менее, я столкнулся с этой ошибкой, когда я пытаюсь настроить опцию удаления элементов из списка, однако он выдает ошибку: Uncaught FirebaseError: Функция CollectionReference.do c () требует, чтобы ее первый аргумент был введите непустую строку, но это было: пользовательский объект Object. У меня нет проблем с настройкой способа создания предметов. Будем благодарны за любые указания по выбору опции удаления.

Страница, содержащая список:

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);

Страница диагностики:

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 })
      })
    }
  };

На приведенной выше консоли выдается пустой объект. в качестве вывода.

Страница редуктора:

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

РЕДАКТИРОВАТЬ: ошибки указывают на 3 разных местах - 1-й

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

2-й

         dispatch(deleteDiagnosis(id))

3-й

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

Answer 1

Ваша deleteDiagnosis функция объявлена ​​так с одним аргументом:

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

Но вы вызываете ее с двумя аргументами, которые не совпадают:

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

Возможно, вы следует объявить функцию так, чтобы первый элемент не был идентификатором, так что id на самом деле является просто строкой, а не объектом события.

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