React NFC写入功能失败排查：支持NFC设备报‘NFC不支持’错误

1. 代码语法错误 #

你提供的代码存在明显语法问题：Home组件定义完成后，额外多出了一段重复的return语句和闭合括号，这会导致组件无法正确编译运行，直接引发运行时异常，进而触发错误提示。

同时代码里还有两处拼写错误：Succes应为Success，ttext-center应为text-center。修正后的完整代码如下：

"use client"

import { useState } from 'react';

export default function Home() {
  const [nfcSupported, setNfcSupported] = useState(null);
  const [message, setMessage] = useState('');

  const writeToNFC = async () => {
    if ('NDEFReader' in window) {
      try {
        const ndef = new NDEFReader();
        await ndef.write({
          records: [{ recordType: "url", data: "https://www.weekgenz.com/" }]
        });
        setMessage('Success write NFC!');
      } catch (error) {
        setMessage(`Fail to write NFC: ${error}`);
      }
    } else {
      setNfcSupported(false);
      setMessage('Browser or Device not Support NFC.');
    }
  };

  return (
    <div className='h-screen w-full bg-white flex items-center justify-center'>
      <div>
        <h1 className='text-black text-center'>NFC Writer</h1>
        {nfcSupported !== false ? (
          <button onClick={writeToNFC} className='text-white bg-black p-4'>Write link to NFC Card</button>
        ) : (
          <p>{message}</p>
        )}
        {message && <p>{message}</p>}
      </div>
    </div>
  );
}

2. Web NFC API的运行环境限制 #

Web NFC API仅支持HTTPS协议（本地开发的localhost除外）。如果你的网页在HTTP环境下运行，浏览器会直接禁用NDEFReader接口，导致检测不到NFC支持，触发错误提示。

3. 标签兼容性问题 #

你使用的EL-MF1A是MIFARE Classic 1K标签，这类标签不原生支持NDEF格式。Web NFC API主要针对原生支持NDEF的NFC标签（如MIFARE Ultralight、NTAG系列），直接写入MIFARE Classic标签会失败，甚至触发兼容性错误。

若要写入这类标签，需要先通过专用工具将其格式化为NDEF兼容格式，或者使用支持MIFARE Classic的第三方NFC库（Web NFC API本身不支持这类标签的直接操作）。

4. 权限与设备设置 #

需确保以下条件满足：

• 设备的NFC功能已开启
• 浏览器首次调用NFC接口时，你已授权相关权限
• 写入操作必须在用户主动交互（如点击按钮）的上下文内执行，不能在页面加载时自动触发

内容的提问来源于stack exchange，提问作者Nico A.L