获取错误无法解构属性，因为它是未定义的

我尝试从后端获取数据并在前端查看该数据。为此，我尝试了此代码。

function PostsLocation() {

    const { offerId } = useParams();
    console.log(offerId);

    const [posts, setPosts] = useState({});
    const [offerPosts, setOfferPosts] = useState({});

    useEffect(()=>{
        getOnePost();
    }, []);

    const getOnePost = async () => {
        try {
            const response = await axios.get(`/buyerGetOneSellerOffer/${offerId}`)
            console.log(response);
            const allPost=response.data.oneOffer;
            setPosts(allPost);
        } catch (error) {
            console.error(`Error: ${error}`)
        }
    }
    console.log(posts);

    const PostId2=posts.postId
    console.log(PostId2);
    const type=typeof (PostId2);
    console.log(type);

    useEffect(()=>{
        getOneOfferPost();
    }, []);

    useEffect(()=>{
        if (offerPosts && offerPosts.location) {
            console.log(offerPosts.location);
            console.log(offerPosts.location.longitude);
            console.log(offerPosts.location.latitude);
        }
    }, [offerPosts]);

    const getOneOfferPost = async () => {
        try {
            const response = await axios.get(`/buyerGetOnePost/${PostId2}`)
            console.log(response);
            const allOfferPost=response.data.onePost;
            setOfferPosts(allOfferPost);
        } catch (error) {
            console.error(`Error: ${error}`)
        }
    }
    console.log(offerPosts);

    const long = offerPosts?.location?.longitude;
    console.log(long);
    const lat=offerPosts?.location?.latitude;
    console.log(lat);

    const location={lat,long};
}

在这段代码中，我调用了第一个 API 并成功获取了数据。这张图片显示了我从这段console.log(posts)代码中得到的数据。

然后我尝试将此posts.postIdID 获取到此变量const PostId2，我成功获取了此 ID。这张图片显示了我得到的 ID。

然后我尝试将此PostId2ID传递给第二个 API，但 API 调用不起作用。然后我尝试const {PostId2}=posts.postId像这样重构ID 。然后我再次尝试调用第二个 API，但我收到一条错误消息，显示“类型错误：无法解构 'posts.postId' 的属性 'PostId2'，因为它未定义”。我应该如何解决这个问题？