React Native MapView用SVG自定义Marker触发[NSNull doubleValue]报错

• 变量名不匹配：声明状态时定义的变量为restaurant_Latitude、restaurant_Longitude（带下划线），但在Marker的coordinate参数中调用的是无下划线的restaurantLatitude、restaurantLongitude，变量实际为undefined，传到原生层后被解析为NSNull，原生尝试调用NSNull的doubleValue方法就触发了报错。
• 异步方法调用缺漏：getFoodInfo是异步方法，你在async函数中调用时没有加await，拿到的是Promise对象而非实际的坐标数据，也会导致坐标赋值异常。
• 接口返回值无空校验：如果client_instance.getFoodInfo()返回结果为空，或是其中的latitude、longitude字段为null/空值，直接赋值给状态后，会导致传入coordinate的参数为非数字类型，触发原生类型错误。
• Marker参数非法：MapView要求Marker的coordinate属性仅接收latitude和longitude两个数字类型字段，你额外传入了未定义的error字段和position_error变量（你实际声明的错误变量为restaurantPositionError），非法参数会导致原生渲染异常。
• 渲染时机错误：坐标还未正确获取时Marker就已经开始渲染，非法参数导致原生侧子节点渲染/移除逻辑异常，触发removedChildren count相关报错。

1. 修正变量名不匹配问题，保证状态声明和调用的变量名一致：

const [restaurantLatitude, setRestaurantLatitude] = useState(0)
const [restaurantLongitude, setRestaurantLongitude] = useState(0)
const [restaurantPositionError, setRestaurantPositionError] = useState(null)

2. 补充异步方法的await关键字，同时增加接口返回值空校验，确保坐标为合法数字再赋值：

useEffect(() =>{
  const displayRestaurantInfo = async () =>{
    // 补充await关键字
    let restaurantInfo = await client_instance.getFoodInfo()
    // 新增空校验
    if(restaurantInfo && typeof restaurantInfo.latitude === 'number' && typeof restaurantInfo.longitude === 'number') {
      setRestaurantLatitude(restaurantInfo.latitude)
      setRestaurantLongitude(restaurantInfo.longitude)
      setRestaurantPositionError(null)
    } else {
      setRestaurantPositionError('获取餐厅坐标失败')
    }
  }
  displayRestaurantInfo()
// 补充useEffect依赖数组，避免重复执行
}, [])

3. 清理Marker的非法参数，增加条件渲染逻辑，只有坐标合法时才渲染Marker：

return(
  <MapView>
    {/* 只有无报错且坐标不为初始值时才渲染Marker */}
    {!restaurantPositionError && restaurantLatitude !== 0 && restaurantLongitude !== 0 && (
      <Marker 
        coordinate={{
          latitude: restaurantLatitude,
          longitude: restaurantLongitude
        }}
      >
        <View>
          {restaurantIcon()}
        </View>
      </Marker>
    )}
  </MapView>
)

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