为何React FiberNode中的_debugSource属性值为undefined？

问题复现 #

以下是问题对应的复现代码：

import * as React from "react";

export default function SimplePopper() {
  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    console.log(
      event.currentTarget[
        Object.keys(event.currentTarget).reduce((key) => {
          if (key.match(new RegExp("__reactFiber", "i"))) {
            return key;
          }
          return null;
        })
      ]
    );
  };

  return (
    <div>
      <button type="button" onClick={handleClick}>
        button
      </button>
    </div>
  );
}

代码逻辑：点击按钮时获取按钮DOM引用（event.currentTarget），遍历DOM对象属性匹配__reactFiber前缀的key，提取对应的FiberNode节点打印到控制台。
运行时打印的FiberNode中_debugSource属性为undefined，效果参考截图：

核心原因 #

_debugSource是React专供开发调试使用的非公开内部属性，没有对外兼容性承诺，只有全部满足前置生成条件时才会挂载到Fiber节点上，任意条件不满足时取值就是undefined，常见触发场景如下：

• 运行环境为生产构建：生产模式下React会主动移除所有_debug前缀的内部调试字段，压缩包体积同时隐藏内部实现逻辑，这是最常见的触发原因。
• 开发环境下未开启JSX调试信息注入：_debugSource不是React运行时生成的，是JSX编译阶段（Babel/SWC等编译工具处理JSX时）注入的元信息，包含JSX所在的文件路径、行列号等内容。如果编译配置关闭了JSX调试注入（比如手动修改babel配置把@babel/plugin-transform-react-jsx的development参数设为false、关闭sourceMap），就算是开发环境也不会生成这个字段。
• 提取Fiber的代码存在逻辑缺陷：
  • __reactFiber开头的Fiber挂载属性在多数React版本中是DOM实例上的不可枚举属性，Object.keys()只能遍历可枚举属性，大概率拿不到正确的Fiber挂载key。
  • 你写的reduce遍历逻辑本身也有问题，Array.reduce的回调第一个参数是累加值、第二个才是当前遍历到的数组元素，你没有声明当前元素的形参，遍历逻辑完全不符合预期，很容易取到错误的属性值。
    正确的Fiber提取写法参考：

  const fiberKey = Object.getOwnPropertyNames(event.currentTarget)
    .find(key => key.startsWith('__reactFiber'))
  const fiberNode = fiberKey ? event.currentTarget[fiberKey] : null
  

• 目标Fiber节点本身无源码映射：如果对应DOM是React内部创建的宿主节点、第三方组件库编译时未保留JSX调试信息、Portal/StrictMode产生的临时节点，这类节点本身就不会携带_debugSource元信息。

注意：React不推荐业务代码直接读取__reactFiber开头的内部属性，这类属性不属于公开API，不同版本的命名、挂载逻辑、字段结构都可能发生破坏性变更，线上环境使用有极高的兼容风险。

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