如何在Ionic/React中正确使用UniqueDeviceId获取设备唯一ID

你之前的调用写法是Ionic Angular专属的依赖注入模式，Ionic/React不支持Angular的构造函数注入逻辑，照搬Angular示例必然报错。

前置检查 #

你执行的安装命令本身没有问题，安装完成后先执行命令把插件同步到原生工程：

ionic cordova plugin add cordova-plugin-uniquedeviceid
npm install --save @ionic-native/unique-device-id@4
# 同步到对应原生平台
ionic cordova prepare android
ionic cordova prepare ios

注意：Cordova插件无法在浏览器调试环境运行，必须打包到真机/模拟器上测试，否则会找不到插件对象。

正确调用代码 #

Ionic/React 不需要使用@ionic-native/unique-device-id提供的Angular包装类，直接在Cordova环境就绪后，调用window上挂载的原生插件实例即可。推荐在组件的useEffect生命周期中执行，确保Cordova初始化完成：

import { useEffect } from 'react';

const DeviceIdDemo = () => {
  useEffect(() => {
    const fetchUniqueId = () => {
      // TS项目添加下面这行避免类型报错，纯JS项目可删除
      declare const window: any;

      if (window.plugins?.uniqueDeviceID) {
        window.plugins.uniqueDeviceID.get(
          (uuid: string) => {
            console.log('设备唯一ID:', uuid);
            // 此处写入业务逻辑，比如全局存储、数据上报等
          },
          (err: any) => {
            console.log('获取设备ID失败:', err);
          }
        );
      }
    };

    // 等待Cordova加载完成再调用
    if (window.Capacitor) {
      // Capacitor架构项目直接调用
      fetchUniqueId();
    } else {
      // 纯Cordova项目监听deviceready事件
      document.addEventListener('deviceready', fetchUniqueId);
      return () => document.removeEventListener('deviceready', fetchUniqueId);
    }
  }, []);

  return <div>设备ID获取示例</div>;
};

export default DeviceIdDemo;

常见问题说明 #

• 不要在组件初始化的同步逻辑里直接调用插件，必须等deviceready事件触发后再执行，否则会报插件不存在的错误
• TS项目如果提示window.plugins类型不存在，除了示例里的临时类型声明，也可以在项目全局类型定义文件中补充plugins的类型定义
• 该插件在Android 10+、iOS 14+系统上可正常使用，不需要额外申请系统权限
• Capacitor架构的Ionic/React项目可以直接复用上述代码，不需要额外适配

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