使用React和Redux无法删除Firebase集合中的文档

我仔细看了你的代码，发现导致删除操作无响应的核心问题有两个，咱们一步步来解决：

1. 错误调用了未经过Redux包装的action函数 #

你在handleRemove里直接调用了导入的removeProject函数，但这个函数并没有和Redux的dispatch绑定。只有通过mapDispatchToProps注入到组件props里的removeProject，才是被包装过的、能触发Redux异步流程的函数。

修改ProjectSummary.js里的handleRemove方法：

handleRemove = (e) => {
  e.preventDefault()
  // 改为调用props里的removeProject，而非直接调用导入的原始函数
  this.props.removeProject(this.props.project)
}

另外你没必要把props.project存在组件state里，直接用this.props.project就可以，还能避免props更新时state不同步的问题。

2. Firestore删除文档时传入了错误参数 #

在projectActions.js里，doc()方法需要传入的是文档ID字符串，但你直接传了整个project对象，Firebase无法识别这个参数，自然不会执行删除操作。

修改projectActions.js里的removeProject函数：

export const removeProject = (project) => {
  return (dispatch, getState, { getFirestore }) => {
    const firestore = getFirestore()
    // 传入project.id而非整个project对象
    firestore.collection('projects').doc(project.id).delete()
      .then(() => {
        dispatch({ type: 'REMOVE_PROJECT', projectId: project.id })
        console.log('文档删除成功') // 可添加日志验证流程
      }).catch(function(err) {
        dispatch({ type: 'REMOVE_PROJECT_ERROR', err})
        console.error('删除失败:', err)
      });
  }
}

额外优化建议 #

为了让UI能同步更新删除后的状态，你可以在projectReducer.js里更新state，过滤掉被删除的项目：

case 'REMOVE_PROJECT':
  console.log('Removed Project')
  // 假设state中存储了projects数组，过滤掉已删除的项目
  return {
    ...state,
    projects: state.projects.filter(item => item.id !== action.projectId)
  }

这样修改后，点击删除按钮就能正常触发Firestore文档删除，同时同步更新Redux状态和UI了。

内容的提问来源于stack exchange，提问作者stroeda