Next.js 14.0.4环境下iPhone 14设备移动检测失效求助

核心问题排查与修复步骤 #

1. 强制使用客户端组件（Next.js 14 关键要求） #

Next.js 14 默认组件为服务器组件，无法访问浏览器端的devicemotion等传感器API，也无法绑定事件监听。必须在组件顶部声明'use client'：

'use client';

import { useState, useEffect } from 'react';

export default function ShakeDetector() {
  const [shakeDetected, setShakeDetected] = useState(false);
  
  // 后续逻辑编写...
}

2. 请求 iOS 运动传感器权限（iOS 13+ 强制要求） #

iOS 13及以上版本，浏览器需要用户手动授权才能访问运动传感器，否则所有传感器事件会被静默拦截。必须添加权限请求逻辑：

'use client';

import { useState, useEffect } from 'react';

export default function ShakeDetector() {
  const [shakeDetected, setShakeDetected] = useState(false);
  const [hasPermission, setHasPermission] = useState(false);

  useEffect(() => {
    // 请求运动权限
    const requestPermission = async () => {
      if (typeof DeviceMotionEvent !== 'undefined' && typeof DeviceMotionEvent.requestPermission === 'function') {
        try {
          const permission = await DeviceMotionEvent.requestPermission();
          if (permission === 'granted') {
            setHasPermission(true);
            setupShakeListener();
          }
        } catch (err) {
          console.error('权限请求失败:', err);
        }
      } else {
        // 非iOS设备或旧版iOS，直接绑定监听
        setHasPermission(true);
        setupShakeListener();
      }
    };

    const setupShakeListener = () => {
      let lastX = null;
      let lastY = null;
      let lastZ = null;
      const threshold = 15; // 可根据iPhone 14的灵敏度调整阈值

      const handleMotion = (event) => {
        const { x, y, z } = event.accelerationIncludingGravity;
        
        if (lastX !== null && lastY !== null && lastZ !== null) {
          const deltaX = Math.abs(x - lastX);
          const deltaY = Math.abs(y - lastY);
          const deltaZ = Math.abs(z - lastZ);

          if (deltaX > threshold || deltaY > threshold || deltaZ > threshold) {
            // 用函数式更新规避闭包陷阱
            setShakeDetected(prev => !prev);
          }
        }

        lastX = x;
        lastY = y;
        lastZ = z;
      };

      window.addEventListener('devicemotion', handleMotion);
      return () => {
        window.removeEventListener('devicemotion', handleMotion);
      };
    };

    requestPermission();
  }, []);

  return (
    <div>
      {!hasPermission ? (
        <p>请允许访问运动传感器以检测摇晃</p>
      ) : (
        <p>摇晃状态: {shakeDetected ? '已检测到摇晃' : '未检测到摇晃'}</p>
      )}
    </div>
  );
}

3. 修复状态更新的闭包陷阱 #

如果直接调用setShakeDetected(true)无反应，大概率是闭包导致状态未正确更新，改用函数式更新写法：

// 错误写法（闭包陷阱）
setShakeDetected(true);

// 正确写法
setShakeDetected(prevState => true);
// 或者切换状态
setShakeDetected(prev => !prev);

4. 适配 Shake.js 库 #

若坚持使用Shake.js，需确保适配iOS环境：

'use client';

import Shake from 'shake.js';
import { useEffect } from 'react';

export default function ShakeDetector() {
  useEffect(() => {
    const shakeEvent = new Shake({
      threshold: 15, // 适配iPhone 14的灵敏度
      timeout: 500   // 防抖间隔
    });

    shakeEvent.start();

    const handleShake = () => {
      console.log('检测到摇晃');
      setShakeDetected(prev => !prev);
    };

    window.addEventListener('shake', handleShake);

    return () => {
      shakeEvent.stop();
      window.removeEventListener('shake', handleShake);
    };
  }, []);

  return <div>Shake.js 检测组件</div>;
}

5. 验证运行环境 #

• 必须使用HTTPS访问：iOS要求传感器API仅在安全上下文（HTTPS）中生效，本地开发可通过ngrok等工具将next dev的HTTP服务转发为HTTPS
• 仅在真实iPhone设备测试：桌面浏览器无运动传感器，无法触发事件

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