Reactjs React/Redux+；firestore无法读取属性'；参数'；未定义的

我正在尝试使用firestore在我的React/Redux应用程序中实现删除功能。但是我遇到了这个错误，

无法读取未定义的属性“params”

看起来好像我的URL中没有id？我还认为我需要传递我要删除的文档的id，但如何做呢？绑定到onDelete？我认为我的错误与URL中的id有关，该id缺失，但我不确定

import React, { Component } from "react"
import { compose } from "redux"
import { connect } from "react-redux"
import { firestoreConnect } from "react-redux-firebase"
import { Link } from "react-router-dom"
import PropTypes from "prop-types"


class Health extends Component {
  onDeleteClick = () => {
    const { delHealth, firestore, history } = this.props

    firestore
      .delete({
        collection: "delHealth",
        doc: delHealth.id,
      })
      .then(history.push("/"))
  }
  render() {
    const { health } = this.props

    if (health) {
      const heal = health.slice(0, 3)
      return (
        <table>
          <thead>
            <tr>
              <th> Condition </th> <th> Dosage </th> <th> Fever </th>{" "}
              <th> Headache </th> <th> Pain </th> <th> Weight </th>{" "}
              <th> Hearth Rate </th> <th> Temperature </th> <th />
            </tr>{" "}
          </thead>{" "}
          <tbody>
            {" "}
            {heal.map(el => (
              <tr key={el.id}>
                <td> {el.condition} </td> <td> {el.dosage} </td>
                <td> {el.fever} </td> <td> {el.headache} </td>
                <td> {el.pain} </td>{" "}
                <td>
                  {" "}
                  {el.weight}
                  kg{" "}
                </td>{" "}
                <td> {el.hearthRate} </td> <td> {el.temperature} </td>
                <td>
                  <div className="buttons-edit-del">
                    <Link to={`/health/healthEdit/${el.id}`}>
                      <i class="fas fa-pen" />
                    </Link>{" "}
                    <i class="fas fa-trash-alt" onClick={this.onDeleteClick} />{" "}
                  </div>{" "}
                </td>{" "}
              </tr>
            ))}{" "}
          </tbody>{" "}
        </table>
      )
    } else {
      return <h1> loding </h1>
    }
  }
}

Health.propTypes = {
  firestore: PropTypes.object.isRequired,
  health: PropTypes.array,
}

export default compose(
  firestoreConnect(props => [
    {
      collection: "health",
      storeAs: "delHealth",
      doc: props.match.params.id,
    },
  ]),
  connect(({ firestore: { ordered } }, props) => ({
    health: ordered.health,
    delHealth: ordered.delHealth && ordered.delHealth[0],
  }))
)(Health)

import React，{Component}来自“React”
从“redux”导入{compose}
从“react redux”导入{connect}
从“react-redux firebase”导入{firestoreConnect}
从“反应路由器dom”导入{Link}
从“道具类型”导入道具类型
类健康扩展组件{
onDeleteClick=（）=>{
const{delHealth，firestore，history}=this.props
火库
.删除({
收藏：“delHealth”，
doc:delHealth.id，
})
.then（history.push（“/”）
}
render（）{
const{health}=this.props
国际单项体育联合会（卫生）{
const heal=health.slice（0,3）
返回(
条件剂量发热{“}
头痛疼痛重量{“}
炉缸速率温度
{" "}
{" "}
{" "}
{heal.map（el=>(
{el.条件}{el.剂量}
{发烧}{头痛}
{el.pain}{”“}
{" "}
{el.weight}
kg{“}
{" "}
{el.hearthRate}{el.temperature}
{" "}
{" "}
{" "}
{" "}
))}{" "}
{" "}
)
}否则{
回程住宿
}
}
}
Health.propTypes={
firestore:PropTypes.object.isRequired，
运行状况：PropTypes.array，
}
导出默认组合(
firestoreConnect（道具=>[
{
藏品：“健康”，
storeAs：“delHealth”，
doc:props.match.params.id，
},
]),
连接（{firestore:{ordered}，props）=>({
健康：有序。健康，
delHealth:ordered.delHealth&&ordered.delHealth[0]，
}))
)（卫生）

您很可能正在使用最新版本的React路由器（v4+）。因为在旧的路由器中，这是做事的方式。但在较新的react路由器库中，必须使用“withRouter”高阶组件包装整个组件。无论何时渲染，它都会将更新的匹配、位置和历史道具传递给包装组件

首先，您必须导入withRouter

import { withRouter } from "react-router";

然后你必须用路由器把它包起来

   export default withRouter(compose(
    firestoreConnect(props => [
      {
        collection: "health",
        storeAs: "delHealth",
        doc: props.match.params.id,
      },
    ]),
    connect(({ firestore: { ordered } }, props) => ({
      health: ordered.health,
      delHealth: ordered.delHealth && ordered.delHealth[0],
    }))
  )(Health))

---

希望这有帮助。

props.match可能未定义？我有相同的代码，让我们使用

props.match.params.id

编辑功能，并且正在运行