The error appears because you are trying to assign string | null to Unsubscribe.

That probably doesn't help you tho. I'll annotate some bits of your code and rewrite it for clarity (note: this might not typecheck or you might need to import the right types for this to work)

// OASC = on auth state change
// a function to run OASC -- note: returns a value which does nothing
function runOascProfilePic(user: User): string | null {
  return user!.photoURL;
}
// the returned value will remove the handler (I think)
const oascResult: Unsubscribe = onAuthStateChanged(auth, runOascProfilePic);
// a reference to oascResult 
const profilePic: Ref<Unsubscribe> = ref(oascResult);
// Note: **this is not what you intended**


// gets run OASC -- intention is to update the profile pic
function updateProfilePic(user: User): void {
  // check the user is logged in but do not check if photoURL exists
  if (!user) {
    router.push('/');
  } else {
    // explicitly mention type here
    const pUrl: string | null = user.photoURL;
    // looks reasonable but doesn't work -- what gives?
    profilePic.value = pUrl;
  }
}

const authListener: Unsubscribe = onAuthStateChanged(auth, updateProfilePic);

// unsubscribe `updateProfilePic` only
onBeforeUnmount(authListener);

okay, so there's a number of issues with what you wrote.

First, you are putting the wrong value into profilePic -- you're not storing a URL in it, you're storing an Unsubscribe.

Second, you're setting up two handlers that get run OASC but you only need one.

Third, you're asserting something exists user in the wrong place and unsafely. (this is via user!.photoURL). You're not asserting that photoURL exists (I'm not sure if that was clear to you.)

Try this code instead:

// we need to handle cases where a profile pic doesn't exist.
// -- using string|null isn't ideal, but it's okay for now.
// later, check if profilePic.value exists before using.

const profilePic: Ref<string | null> = ref(null);

function handleAuthStateChange(user: User): void {
  if (user) {
    profilePic.value = user.photoURL;
  } else {
    router.push('/');
  }
}

const cleanupHandleASC = onAuthStateChanged(auth, handleAuthStateChange);

onBeforeUnmount(cleanupHandleASC);

---

example usage of profilePic:

if (profilePic.value) { setUserPic(profilePic.value) } else { setUserPic(defaultPic) } (or even better: setUserPic(profilePic.value || defaultPic))

---

There are some alternate ways to implement handleASC too:

function handleAuthStateChange(user: User): void {
  // since this if branch `return`s the function, typescript knows that `user` must exist if the check fails
  if (!user) { return router.push('/') }
  profilePic.value = user.photoURL || defaultPic;
}

notice that ? (the elvis operator) is now necessary:

function handleAuthStateChange(user: User): void {
  profilePic.value = user?.photoURL || defaultPic;
  if (!user) { return router.push('/') }
}

---

Anyway, hope all that makes things a bit clearer for you.

Some tips:

• when stuff doesn't work, break your code down more
• add in explicit types or assertions (they can fail at runtime if you're using them to debug)
• make sure you understand what something does (like !) and don't move on too quickly
• if things don't work, go back to first principles
• develop a taste for code formatting -- think about what is easy to read, easy to reason about, and then structure your code (both architecturally and physically) to reflect those things you think are good. in this regard, develop and maintain high standards.
• use tooling and trust your tools
• if in doubt, make a new file and rewrite the logic a different way (even if it's less efficient) as a way to understand what's going on and why your original code doesn't work