React项目中NDEFReader构造函数报错及未定义问题求助

错误1：'NDEFReader' is not defined no-undef #

这个错误是ESLint/TypeScript语法检查导致的——NDEFReader是浏览器提供的全局API，编译器默认不识别这个全局变量。解决方法有三种：

• ESLint配置：在项目的.eslintrc（或.eslintrc.json）中添加全局变量声明：

  {
    "globals": {
      "NDEFReader": "readonly"
    }
  }
  

• TypeScript类型声明：在项目src目录下新建globals.d.ts文件，添加类型定义：

  interface Window {
    NDEFReader: typeof NDEFReader;
  }
  declare var NDEFReader: {
    new (): NDEFReader;
    prototype: NDEFReader;
  };
  

• 代码内注释声明：在使用NDEFReader的文件顶部添加单行注释：

  /* global NDEFReader */
  

错误2：NDEFReader is not a constructor #

这个错误说明浏览器虽检测到NDEFReader存在，但它并非可实例化的构造函数，核心原因是WebNFC的支持条件未满足，解决步骤如下：

1. 确认浏览器与设备支持：
   • WebNFC仅在Chrome/Edge 89+的Android版本中正式支持；桌面端Chrome需手动启用chrome://flags/#enable-experimental-web-platform-features flag，且需连接NFC读卡器
   • 确保使用支持NFC的设备（Android手机/带NFC读卡器的桌面设备）
2. 验证安全上下文：
   • WebNFC只能在HTTPS环境或localhost/127.0.0.1（本地开发）下运行，确认React项目已配置有效HTTPS
3. 优化支持检查逻辑：
   原代码的'NDEFReader' in window检查不够严谨，改为检查是否为构造函数：

   if (typeof window.NDEFReader === 'function') {
     console.log('NDEFReader is supported');
   } else {
     console.log('NDEFReader is not supported or not a constructor');
     addLog("WebNFC is not available on this device");
     return;
   }
   

修改后的完整代码 #

/* global NDEFReader */
const handleRead = async () => {
  addLog("User clicked scan button");
  
  if (typeof window.NDEFReader === 'function') {
    console.log('NDEFReader is supported');
  } else {
    console.log('NDEFReader is not supported or not a constructor');
    addLog("WebNFC is not available on this device/browser");
    return;
  }

  try {
    const ndef = new NDEFReader();
    await ndef.scan();
    addLog("> Scan started");

    ndef.addEventListener("readingerror", () => {
      addLog("Argh! Cannot read data from the NFC tag. Try another one?");
    });

    ndef.addEventListener("reading", ({ message, serialNumber }) => {
      addLog(`> Serial Number: ${serialNumber}`);
      addLog(`> Records: (${message.records.length})`);
      const decoder = new TextDecoder();
      for (const record of message.records) {
        if (record.recordType === "text") {
          const text = decoder.decode(record.data);
          addLog(`> Record text: ${text}`);
        }
      }
    });
  } catch (error) {
    addLog("Error: " + error);
    console.error("NFC scan error:", error);
  }
};

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