TypeScript中向Redux Store传递对象时出现类型不匹配问题

错误根源 #

你遇到的TypeScript报错核心是类型结构不匹配：

• Redux Slice里saveNode的payload期望接收自定义node类型，但你传入的datum是HierarchyPointNode<TreeNodeDatum>类型，两者结构不对应。
• 自定义node接口的data字段错误定义为HierarchyPointNode<TreeNodeDatum>，但实际上HierarchyPointNode自身的data属性就是TreeNodeDatum类型，这导致类型检查失败。

解决方案一：修正自定义node接口并转换数据 #

先调整node接口的类型定义，让它和HierarchyPointNode的实际结构对齐，再将datum转换为符合接口的对象传入：

步骤1：修改Redux Slice的接口定义

import { TreeNodeDatum } from 'react-d3-tree/lib/types/common';
import { HierarchyPointNode } from 'd3-hierarchy';
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

// 修正接口：data字段对应TreeNodeDatum，parent明确类型
interface Node {
  data: TreeNodeDatum | undefined;
  depth: number;
  height: number;
  parent: HierarchyPointNode<TreeNodeDatum> | null;
  x: number;
  y: number;
}

const initialState: Node = {
  data: undefined,
  depth: 0,
  height: 0,
  parent: null,
  x: 0,
  y: 0,
};

export const NodeSlice = createSlice({
  name: 'node',
  initialState,
  reducers: {
    saveNode: (state, action: PayloadAction<Node>) => {
      state.data = action.payload.data;
      state.depth = action.payload.depth;
      state.height = action.payload.height;
      state.parent = action.payload.parent;
      state.x = action.payload.x;
      state.y = action.payload.y;
    },
  },
});

export const { saveNode } = NodeSlice.actions;

步骤2：在点击事件中转换数据后传入

import { TreeNodeDatum } from 'react-d3-tree/lib/types/common';
import { HierarchyPointNode } from 'd3-hierarchy';
import { saveNode } from './path/to/NodeSlice';

const handleNodeClick = (datum: HierarchyPointNode<TreeNodeDatum>) => {
  // 将datum转换为符合Node接口的对象
  const nodePayload: Node = {
    data: datum.data,
    depth: datum.depth,
    height: datum.height,
    parent: datum.parent,
    x: datum.x,
    y: datum.y,
  };
  
  dispatch(saveNode(nodePayload));
};

解决方案二：直接复用HierarchyPointNode类型（更简洁） #

如果不需要自定义额外字段，完全可以直接用HierarchyPointNode<TreeNodeDatum>作为Redux的状态类型，省去自定义接口的麻烦：

修改Redux Slice

import { TreeNodeDatum } from 'react-d3-tree/lib/types/common';
import { HierarchyPointNode } from 'd3-hierarchy';
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

// 直接复用HierarchyPointNode作为状态类型，默认值设为null表示未选中
type NodeState = HierarchyPointNode<TreeNodeDatum> | null;

const initialState: NodeState = null;

export const NodeSlice = createSlice({
  name: 'node',
  initialState,
  reducers: {
    saveNode: (state, action: PayloadAction<HierarchyPointNode<TreeNodeDatum>>) => {
      // 类型完全匹配，直接替换整个状态
      return action.payload;
    },
  },
});

export const { saveNode } = NodeSlice.actions;

点击事件中直接传入datum

import { TreeNodeDatum } from 'react-d3-tree/lib/types/common';
import { HierarchyPointNode } from 'd3-hierarchy';
import { saveNode } from './path/to/NodeSlice';

const handleNodeClick = (datum: HierarchyPointNode<TreeNodeDatum>) => {
  // 类型完全匹配，无需转换
  dispatch(saveNode(datum));
};

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