navigator.geolocation.getCurrentPosition()致NextJS应用无响应

AI 小北

2026-8-27

问题现象

基于TypeScript的Next.js应用中，实现点击按钮获取用户地理位置功能时，出现请求挂起异常，初始实现代码如下：

export default function MyComponent() {
  // 示例默认假设navigator下存在geolocation对象
  const ask = useCallback(() => {
    navigator.geolocation.getCurrentPosition(
      () => console.log('success'),
      (error) => console.log('error =', error),
    );
  }, []);

  return <button onClick={ask}>Click</button>
}

异常表现：

点击按钮后无任何响应，成功、失败回调均不触发
仅当切换浏览器标签页、切换系统工作窗口再返回页面，触发页面重绘/焦点变化时，控制台才会输出success日志
连续点击按钮10次后，切回页面会累计打印10次success日志，所有排队请求会同时触发回调

添加timeout配置后仅能触发超时错误，未解决核心问题：

export default function MyComponent() {
  const ask = useCallback(() => {
    navigator.geolocation.getCurrentPosition(
      () => console.log('success'),
      (error) => console.log('error =', error),
      {timeout:5000},
    );
  }, []);

  return <button onClick={ask}>Click</button>
}

此时控制台固定输出超时错误：

error = {code: 3, message: 'Timeout expired'}

功能必须依赖用户切换窗口才能正常返回结果，体验完全不符合预期。

根因分析

该问题是三个因素共同导致的：

用户交互信任链断裂：Next.js App Router下组件默认是服务端组件，未加'use client'声明时，点击事件的绑定和回调执行存在异步延迟，而浏览器的地理位置API属于敏感API，要求必须在用户交互触发的同步执行栈内调用，否则会将权限请求挂起，直到页面发生焦点变化（切标签/切窗口）时才会重新处理挂起的请求队列，这也是切回页面后所有累计请求同时触发的核心原因。
权限弹窗被遮挡：Next.js开发模式默认开启React严格模式，组件会重复挂载渲染，加上开发环境自带的热重载浮层，很容易把浏览器弹出的地理位置权限请求弹窗压在页面层级下方，用户看不到弹窗就无法完成授权，请求会一直处于挂起状态。
缺少前置校验：代码未提前检查浏览器地理位置支持情况、当前权限状态、运行环境是否为安全上下文（HTTPS/localhost），遇到环境异常时也没有兜底逻辑，导致请求无意义挂起。

修复方案

按以下步骤调整即可解决问题：

在组件文件最顶部添加'use client'指令，将组件标记为客户端组件，确保点击回调同步执行，保留用户交互信任链，避免请求被浏览器挂起。
调用API前增加前置校验：先判断浏览器是否支持地理位置能力，再通过permissionsAPI提前查询当前权限状态，如果是已拒绝状态直接给出提示，不用发起挂起请求。
调整getCurrentPosition配置项，开启位置缓存降低请求耗时，设置合理的超时时间，不需要高精度场景下关闭高精度定位减少等待时间。
开发环境下如果遇到严格模式重复调用导致的请求堆积，可以临时在next.config.js中关闭严格模式的重复渲染校验（生产环境不受该配置影响，无需担心线上问题）。

修复后的完整可运行代码：

'use client'
import { useCallback, useState } from 'react'

export default function MyComponent() {
  const [loading, setLoading] = useState(false)
  const [errMsg, setErrMsg] = useState('')
  const [location, setLocation] = useState<{lng: number, lat: number} | null>(null)

  const handleGetLocation = useCallback(async () => {
    setLoading(true)
    setErrMsg('')
    setLocation(null)

    // 校验浏览器支持性
    if (!navigator.geolocation) {
      setErrMsg('当前浏览器不支持地理位置获取能力')
      setLoading(false)
      return
    }

    // 提前查询权限状态
    const permission = await navigator.permissions.query({ name: 'geolocation' })
    if (permission.state === 'denied') {
      setErrMsg('已被禁止获取位置权限，请在浏览器设置中手动开启')
      setLoading(false)
      return
    }

    navigator.geolocation.getCurrentPosition(
      (res) => {
        setLocation({
          lng: res.coords.longitude,
          lat: res.coords.latitude
        })
        setLoading(false)
      },
      (err) => {
        setErrMsg(`获取位置失败：${err.message}`)
        setLoading(false)
      },
      {
        enableHighAccuracy: false,
        timeout: 10000,
        maximumAge: 30000 // 复用30秒内的缓存位置，减少重复请求
      }
    )
  }, [])

  return (
    <div>
      <button onClick={handleGetLocation} disabled={loading}>
        {loading ? '位置获取中...' : '点击获取地理位置'}
      </button>
      {errMsg && <p style={{color: 'red', marginTop: 8}}>{errMsg}</p>}
      {location && <p style={{marginTop: 8}}>经度：{location.lng}，纬度：{location.lat}</p>}
    </div>
  )
}

额外校验项：

本地开发请使用localhost访问，线上部署必须配置HTTPS，非安全上下文下浏览器会直接禁用地理位置API，同样会出现请求挂起问题
Windows系统下请确认系统位置权限已开启：设置>隐私和安全性>位置，打开「允许桌面应用访问你的位置」开关，避免系统层拦截导致请求挂起

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