Firebase数据加载至React表单向导遇Redux ID解析错误

看起来你的整体代码框架是没问题的，Postman能正常请求说明API本身是好的，问题大概率出在ID传递细节、Redux状态更新逻辑或者组件渲染的边界处理上，咱们一步步来梳理：

1. 先确认Workflow ID是否真的传到了Action里 #

首先要排查最基础的参数传递问题，给你的代码加几个日志来验证：

在Action里加日志验证ID #

修改你的getWorkflow Action，打印传入的ID：

export const getWorkflow = (WorkflowId) => dispatch => {
  console.log("Action接收到的Workflow ID：", WorkflowId); // 新增日志
  dispatch({ type: LOADING_DATA });
  axios
    .get(`/Workflow/${WorkflowId}`)
    .then(res => {
      dispatch({ type: SET_WORKFLOW, payload: res.data });
    })
    .catch(err => {
      dispatch({ type: SET_WORKFLOW, payload: [] });
    });
};

在组件里加日志验证调用时的ID #

修改组件的componentDidMount：

componentDidMount() {
  const testWorkflowId = '3ejAQxPoJ6Wsqsby01S6';
  console.log("组件调用getWorkflow时传入的ID：", testWorkflowId); // 新增日志
  this.props.getWorkflow(testWorkflowId);
}

打开浏览器控制台，如果这两个日志显示的ID一致，说明参数传递没问题；如果不一致，就要检查组件到Action的连接是否正确（比如connect映射有没有写错）。

2. 修复Reducer的状态更新逻辑 #

我注意到你的Reducer里，SET_WORKFLOW的case没有把loading设为false，而SET_WORKFLOWS是处理了的，这会导致组件一直处于加载状态，甚至可能因为状态没有正确更新而不触发重新渲染：

修改Reducer的SET_WORKFLOW分支：

case SET_WORKFLOW:
  return {
    ...state,
    Workflow: action.payload,
    loading: false // 加上这行，和SET_WORKFLOWS保持一致
  };

3. 给组件加边界渲染处理 #

初始状态里Workflow是空对象，直接渲染Workflow.createdAt会报错（空对象没有createdAt属性），建议加上加载状态判断和可选链操作符：

render() {
  const { Workflow, loading } = this.props.data;
  return (
    <div>
      <p>Crazy</p>
      {loading ? (
        <p>加载中...</p>
      ) : (
        <h4>{Workflow?.createdAt}</h4> // 用可选链避免空对象报错
      )}
    </div>
  );
}

4. 确认API请求的完整URL是否正确 #

Postman能正常请求，但代码里的axios请求可能因为baseURL配置问题，导致实际请求的路径和Postman不一致。可以在Action里打印完整请求URL：

export const getWorkflow = (WorkflowId) => dispatch => {
  const fullUrl = `/Workflow/${WorkflowId}`;
  console.log("实际请求的URL：", fullUrl); // 打印完整URL
  dispatch({ type: LOADING_DATA });
  axios.get(fullUrl)
  // ... 后续代码
};

对比这个URL和Postman里的请求URL，确保完全一致（比如有没有遗漏Firebase的API域名前缀）。

5. 用Redux DevTools验证状态变化 #

打开浏览器的Redux DevTools，查看getWorkflow Action触发后：

• 有没有正确触发LOADING_DATA和SET_WORKFLOW的Action
• data.Workflow状态是否被正确更新为API返回的数据

如果Action触发了但状态没变化，要检查Action Type的拼写是否完全一致（比如大小写是否统一，SET_WORKFLOW有没有写成SET_workflow）。

按照上面的步骤排查，应该能定位到ID未解析的问题根源。

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