TypeScript中结合可选链与空值合并操作符安全处理循环中的潜在未定义值

interface NodeData {
  id: string;
  source: string;
  // ... 其他属性
}

interface DataProps {
  Data?: {
    nodes?: NodeData[];
  };
}

// 假设 currentCam 已定义
const currentCam = { id: 'someId' }; 
declare const dispatch: (action: any) => void;
declare const linkById: (id: string) => any;

function processLinks(props: DataProps) {
  const allLinks = props.Data?.nodes; // allLinks 的类型可能是 NodeData[] | undefined

  // TypeScript 在此处可能报错：Object is possibly 'undefined'.ts(2532)
  for (let i = 0; i < allLinks?.length; i++) { 
    if (allLinks?.[i].source === currentCam.id) {
      dispatch(linkById(allLinks?.[i].id));
    }
  }
}

function processLinksRobust(props: DataProps) {
  // 结合可选链和空值合并操作符
  // 如果 props.Data?.nodes 为 null 或 undefined，则 allLinks 将被赋值为 []
  const allLinks = props.Data?.nodes ?? []; // allLinks 的类型现在明确为 NodeData[]

  // TypeScript 不再报错，因为 allLinks 保证是 NodeData[] 类型
  for (let i = 0; i < allLinks.length; i++) {
    // 此时 allLinks[i] 访问是安全的，因为 allLinks 确定是数组
    // 但为了确保 allLinks[i] 不为 undefined (例如，数组在循环中被修改)，
    // 依然可以使用可选链，或者在循环前进行类型守卫
    if (allLinks[i]?.source === currentCam.id) { // allLinks[i] 可能是 undefined，所以这里使用可选链更安全
      dispatch(linkById(allLinks[i]?.id));
    }
  }
}

interface LinkNode {
  id: string;
  source: string;
  target: string;
  // ... 其他属性
}

interface GraphData {
  nodes?: LinkNode[];
  edges?: any[]; // 假设还有其他数据
}

interface ComponentProps {
  graphData?: GraphData;
  activeNodeId?: string;
}

// 模拟 Redux dispatch 和 action creator
const dispatch = (action: any) => console.log('Dispatching:', action);
const selectLinkAction = (id: string) => ({ type: 'SELECT_LINK', payload: id });

function GraphProcessor({ graphData, activeNodeId }: ComponentProps) {
  // 核心改进：使用 ?? [] 确保 allNodes 始终是一个数组
  const allNodes = graphData?.nodes ?? []; 

  console.log('Processing nodes:', allNodes);

  // 循环现在是类型安全的，TypeScript不会抱怨 allNodes 可能是 undefined
  for (let i = 0; i < allNodes.length; i++) {
    const currentNode = allNodes[i]; // currentNode 的类型是 LinkNode

    // 假设我们想找到与 activeNodeId 匹配的链接
    if (activeNodeId && currentNode.source === activeNodeId) {
      console.log(`Found link from active node: ${currentNode.id}`);
      dispatch(selectLinkAction(currentNode.id));
    }
  }

  // 另一个例子：处理可能不存在的边
  const allEdges = graphData?.edges ?? [];
  console.log('Processing edges:', allEdges);
  // ... 对 allEdges 的其他处理
}

// 模拟调用
console.log("--- Scenario 1: Full data ---");
GraphProcessor({
  graphData: {
    nodes: [
      { id: 'n1', source: 'a', target: 'b' },
      { id: 'n2', source: 'b', target: 'c' },
    ],
    edges: [],
  },
  activeNodeId: 'a',
});

console.log("\n--- Scenario 2: Data is null ---");
GraphProcessor({
  graphData: null, // graphData 为 null
  activeNodeId: 'a',
});

console.log("\n--- Scenario 3: nodes is undefined ---");
GraphProcessor({
  graphData: {
    edges: [], // nodes 属性缺失
  },
  activeNodeId: 'b',
});

console.log("\n--- Scenario 4: Empty nodes array ---");
GraphProcessor({
  graphData: {
    nodes: [], // nodes 为空数组
  },
  activeNodeId: 'c',
});