如何通过React与Firebase结合Map函数实现按钮的条件渲染？

Hey Dylan, let's fix that annoying double-button issue! The core problem here is that your conditional logic isn't enforcing a strict either/or scenario—right now, the "Create Profile" button's condition isn't properly excluding cases where the user already has a matching profile. Let's walk through the fixes step by step:

1. Fix the Conditional Rendering Logic (Most Likely Culprit) #

You're correctly checking for a matching UID to show the edit button, but the create button's condition is probably missing a check for the absence of a valid profile.

Example of the Broken Logic (What You Might Have):

// ❌ Creates overlap because "Create" only checks for a logged-in user, not missing profile
{user && <CreateProfileButton />}
{user && profile?.uid === user.uid && <EditProfileButton />}

Fixed Mutually Exclusive Logic:

Use a ternary operator to explicitly pick one button or the other, or add a negative check to the create button's condition:

Option 1: Ternary (Cleanest for Mutex Cases)

{user ? (
  // If profile exists and matches user → Edit; else → Create
  profile?.uid === user.uid ? (
    <EditProfileButton />
  ) : (
    <CreateProfileButton />
  )
) : null} // Hide both if user isn't logged in

Option 2: Separate Conditions with Explicit Negation

// ✅ Show Create only if user is logged in AND no matching profile exists
{user && (!profile || profile.uid !== user.uid) && <CreateProfileButton />}

// ✅ Show Edit only if user is logged in AND profile matches
{user && profile?.uid === user.uid && <EditProfileButton />}

2. Handle Loading States (Common Hidden Issue) #

If your Firebase profile data is loading asynchronously, the profile variable might be undefined or null temporarily. This can cause the create button to flash on screen before the edit button loads—and in some cases, stick around if the loading state isn't handled. Add a loading spinner to avoid this:

const [isLoading, setIsLoading] = useState(true);
const [profile, setProfile] = useState(null);

// Inside your Firebase data fetch:
useEffect(() => {
  const unsubscribe = db.collection("profiles")
    .where("uid", "==", user?.uid)
    .onSnapshot((snapshot) => {
      setProfile(snapshot.empty ? null : snapshot.docs[0].data());
      setIsLoading(false);
    });

  return unsubscribe;
}, [user]);

// Render logic with loading state
{isLoading ? (
  <div>Loading profile...</div>
) : user ? (
  profile?.uid === user.uid ? <EditProfileButton /> : <CreateProfileButton />
) : null}

3. Verify Your Firebase Profile Query #

Double-check that you're correctly fetching the profile associated with the logged-in user. If your query is missing the where("uid", "==", user.uid) clause, or if you're fetching a single profile without filtering, profile might never match the user's UID—leaving the create button visible even when an edit button should show.

4. Debug with Console Logs #

If you're still stuck, add quick console logs to see what's happening with your conditions:

console.log("User UID:", user?.uid);
console.log("Profile UID:", profile?.uid);
console.log("Show Create?", user && (!profile || profile.uid !== user.uid));
console.log("Show Edit?", user && profile?.uid === user.uid);

This will tell you exactly which conditions are evaluating to true when both buttons appear—making it easy to spot the logical gap.

内容的提问来源于stack exchange，提问作者Dylan Prem