React组件递归时出现Uncaught TypeError: nodes1 is undefined如何解决

DevOps 小满

2026-9-24

报错原因

报错中的nodes1是打包工具（如Babel、Vite）转译代码时，对重复命名的nodes变量做的自动重命名，本质就是你代码中未定义的nodes属性
核心错误出在Note.js的JSX写法：你写的三元判断nodes ? ... : null没有包裹在JSX的JavaScript表达式标记{}中，相当于这段判断逻辑完全没有生效，nodes.map无论nodes是否存在都会执行。当你遍历到没有nodes属性的节点（比如示例里的"This is a note 3"、"This is a note 4"等节点），nodes为undefined，调用map方法自然抛出未定义错误。

修复方案

你可以选择任意一种方式修复，推荐第一种写法更简洁：

方案1：给递归属性加默认值（推荐）

直接给nodes设置空数组默认值，天然满足递归终止条件，无需额外判断：

import React from "react";

const Note = ({ id, note, nodes = [] }) => {
  return (
    <div className="note">
      <span className="note__id">{id}</span>
      <span className="note__note">{note}</span>
      {nodes.map(({ id, note, nodes }) => {
        return <Note key={id} id={id} note={note} nodes={nodes} />;
      })}
    </div>
  );
};

export default Note;

方案2：保留三元判断，补全JSX表达式标记

如果不想用默认值，把整个判断逻辑包裹在{}中即可：

import React from "react";

const Note = ({ id, note, nodes }) => {
  return (
    <div className="note">
      <span className="note__id">{id}</span>
      <span className="note__note">{note}</span>
      {nodes ? nodes.map(({ id, note, nodes }) => {
        return <Note key={id} id={id} note={note} nodes={nodes} />;
      }) : null}
    </div>
  );
};

export default Note;

React递归组件实现注意事项