这是我的代码（react，redux-toolkit），我得到了那个错误。

import { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import styles from "./styles.module.css";
import { getCurrentWeather } from "../../Redux/Reducers/currentWeatherSlice";
import { getUserPosition } from "../../Redux/Reducers/userPositionSlice";

// URLFor the icons
// https://openweathermap.org/img/wn/${}.pngs

function CurrentWeather() {
  const dispatch = useDispatch();
  const currentWeather = useSelector(
    (state) => state.currentWeather.currentWeather
  );
  const userPosition = useSelector((state) => state.userPosition.userPosition);

  const [query, setQuery] = useState("");
  const [x, setX] = useState(null);
  const [y, setY] = useState(null);

  //Get user's Position
  useEffect(() => {
    const successHandler = (position) => {
      setX(position.coords.latitude);
      setY(position.coords.longitude);
    };
    navigator.geolocation.getCurrentPosition(successHandler);

    if (x && y !== null) {
      dispatch(getUserPosition({ x, y }));
    }
  }, [dispatch, x, y]);

  const handleCitySearch = (e) => {
    setQuery(e.target.value);
  };

  const handleForm = (e) => {
    e.preventDefault();
  };

  const handleCityFetch = () => {
    dispatch(getCurrentWeather(query));
    setQuery("");
  };

  console.log(userPosition);

  return (
    <div className={styles.container}>
      <h1>CurrentWeather</h1>
      <div className={styles.currentWeather_container}>
        <div className={styles.input_container}>
          <form onSubmit={handleForm} className={styles.form}>
            <input
              value={query}
              type="text"
              placeholder="Search City"
              onChange={handleCitySearch}
            />
            <button onClick={handleCityFetch}>Go</button>
          </form>
        </div>

        <div className={styles.top_section}>
          {x && y && userPosition && (
            <>
              <div>
                <p>{userPosition.name}</p>
                <p>{userPosition.visibility}</p>
              </div>
              <div>
                <span>{userPosition?.main.temp}</span>
                <span>°C</span>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

export default CurrentWeather;

即使它在userPosition.name上按预期工作，当我试图渲染userPosition.main.temp时，我还是得到了错误。
我不确定这是redux状态问题，还是我试图在获得数据之前进行渲染（尽管看起来我确实拥有数据）。
我已经尝试了多种解决方案，如将userPosition的状态移动到它自己的切片，在userPosition上使用可选链操作符，而且我到处都有一堆控制台日志，但我找不到我的错误。