Vue组件无法获取组合式函数返回的Stripe订阅数据

你遇到的问题核心是异步操作的时序问题：

• 组合式函数里的fetchSubscription是异步函数，调用getDocs查询Firebase需要网络请求时间
• 组件初始化时你立刻打印subscription.value，此时fetchSubscription里的异步请求还未完成，subscription还是初始的null
• 而组合式函数内部的console.log是在await getDocs(...)之后执行的，此时异步请求已经返回结果，所以能拿到正确值

以下几种方式可以帮你正确访问到订阅数据：

方式1：在模板中直接使用响应式变量 #

Vue的响应式系统会自动跟踪变量变化，模板里可以直接绑定subscription，当异步请求完成后视图会自动更新：

<template>
  <div v-if="isLoading">加载中...</div>
  <div v-else-if="subscription">
    当前订阅类型：{{ subscriptionType }}
  </div>
  <div v-else>暂无有效订阅</div>
</template>

方式2：用watch监听subscription变化 #

如果需要在JS逻辑里处理订阅数据，可以用watch监听变量变化，当subscription更新时执行对应逻辑：

<script setup>
import { watch } from "vue";
import { useCurrentSubscription } from "../../composables/stripe/currentSubscription";

const { subscription, isLoading, subscriptionType } = useCurrentSubscription();

// 监听subscription的变化，拿到最新值
watch(subscription, (newSub) => {
  if (newSub) {
    console.log("订阅数据：", newSub.data());
    console.log("订阅类型：", subscriptionType.value);
  } else {
    console.log("无有效订阅");
  }
}, { immediate: true }); // immediate: true 会在初始化时立刻执行一次
</script>

方式3：让组合式函数返回异步操作的Promise #

修改组合式函数，返回fetchSubscription函数，在组件里手动调用并await：

修改后的组合式函数： #

import { ref } from "vue";
import { db, auth } from "../../firebase/config";
import { collection, query, where, getDocs } from "firebase/firestore";

export function useCurrentSubscription() {
    const isLoading = ref(false);
    const subscription = ref(null);
    const subscriptionType = ref(null);

    async function fetchSubscription() {
        isLoading.value = true;
        try {
            const subRef = collection(
                db,
                "stripe-customers",
                auth.currentUser.uid,
                "subscriptions"
            );

            const subQuery = query(
                subRef,
                where("status", "in", ["trialing", "active", "past_due", "unpaid"])
            );

            const subSnapshot = await getDocs(subQuery);
            if (subSnapshot.docs.length > 0) {
                subscription.value = subSnapshot.docs[0];
                const subData = subscription.value.data();
                subscriptionType.value = subData.items[0].price.product.metadata.plan;
            } else {
                subscription.value = null;
                subscriptionType.value = null;
            }
        } catch (err) {
            console.error("获取订阅失败：", err);
            subscription.value = null;
        } finally {
            isLoading.value = false;
        }
    }

    return { subscription, isLoading, subscriptionType, fetchSubscription };
}

组件中使用： #

<script setup>
import { onMounted } from "vue";
import { useCurrentSubscription } from "../../composables/stripe/currentSubscription";

const { subscription, isLoading, subscriptionType, fetchSubscription } = useCurrentSubscription();

onMounted(async () => {
  await fetchSubscription();
  // 此时异步请求已完成，可以拿到正确值
  console.log(subscription.value);
});
</script>

额外优化建议 #

• 给异步操作加上try/catch，处理可能的错误（比如用户未登录、Firebase权限问题）
• 避免在组合式函数里直接自动调用fetchSubscription，让组件在合适时机（比如onMounted）调用，灵活性更高

内容的提问来源于stack exchange，提问作者Likero Bayer