Es la primera vez que trabajo con una API y tengo un pequeño problema aquí. Pasé varias horas hoy tratando de resolver esto, pero no entiendo qué estoy haciendo mal. ¿Alguien sería tan amable de explicar qué está mal con mi código?

Estoy tratando de obtener datos de la API de OpenWeather. Por lo general, funciona la primera vez que se ejecuta, pero luego obtendré este error en la consola: Uncaught (en promesa) TypeError: No se puede desestructurar la propiedad 'temp' de 'data.main' ya que no está definida. Como el método se llama cada 100 ms, sigue inundando la consola con este error. ¿Qué pasa aquí?

 /*Geolocation*/ let latUser = [] let lonUser = [] const errorCallback = (error) => {console.error(error)} const successCallback = (position) => { latUser.push(position.coords.latitude) lonUser.push(position.coords.longitude)} navigator.geolocation.getCurrentPosition(successCallback, errorCallback) /*Weather*/ const weatherText = document.querySelector(".wtext") const weatherCelsius = document.querySelector(".wcelsius") const weatherHumidity = document.querySelector(".whumid") const weatherIcon = document.querySelector(".weather-icon") let weather = { "apiKey": "*****", fetchWeather: function () { fetch("https://api.openweathermap.org/data/2.5/weather?lat=" + latUser[0] + "&lon=" + lonUser[0] + "&units=metric&appid=" + this.apiKey ).then((response) => response.json()) .then((data) => this.displayWeather(data)) }, displayWeather: function(data){ const { temp, humidity } = data.main const { description, icon } = data.weather[0] weatherText.innerText = description weatherCelsius.innerText = temp + "°C" weatherHumidity.innerText = "Humidity: " + humidity + "%" weatherIcon.innerHTML = '<img src="icons/' + icon + '.png">' } } setInterval(() => {weather.fetchWeather() }, 100);