Should usePage() be avoided if the prop I need is page-specific?

Let's say I have a page called User, and it accepts a prop called user that is only available on this page. I also have a component called UserProfile inside the page. Let's assume that UserProfile is nested so deeply within User that prop-drilling becomes non-trivial.

I figured this is a good use case for usePage(). However, when I navigate away from User to another page (one that doesn't have the user prop), the UserProfile component gets re-rendered, potentially causing the application to break (like if I try to access user.username).

The only quick fix I've been able to come up with is something like this:

export function UserProfile() {
  const { user } = usePage().props;
  if (!user) return;

  // ...
}

But this doesn't feel right because it forces me to return prematurely, potentially before other hooks are invoked, which isn't a recommended pattern in React.

Does this mean that I should avoid usePage() altogether in situations like these? Or should I only rely on prop-drilling, even when it's inconvenient?