使用Stripe Checkout时error和url返回undefined问题排查

一、TypeScript类型错误（提示error属性不存在） #

原因 #

snap.data()返回的类型是DocumentData | undefined，TypeScript无法自动推断文档中存在error和url字段，因此抛出类型错误。此外，当文档未加载完成或被删除时，snap.data()可能返回undefined，直接解构会引发运行时风险。

解决方法 #

1. 定义类型接口：明确checkout_sessions文档的结构，让TypeScript识别字段：

// 定义文档结构接口
interface CheckoutSession {
  error?: { message: string };
  url?: string;
  price: string;
  success_url: string;
  cancel_url: string;
}

// 在onSnapshot中使用类型断言
onSnapshot(docRef, (snap) => {
  const sessionData = snap.data() as CheckoutSession;
  if (!sessionData) return; // 处理数据不存在的情况
  const { error, url } = sessionData;
  
  if (error) {
    alert(`发生错误: ${error.message}`);
  }
  if (url) {
    window.location.assign(url);
  }
});

2. 可选链与类型守卫：若不想定义接口，可通过可选链先判断数据存在：

onSnapshot(docRef, (snap) => {
  const data = snap.data();
  if (!data) return;
  
  const error = data.error as { message?: string };
  const url = data.url as string;
  
  if (error?.message) {
    alert(`发生错误: ${error.message}`);
  }
  if (url) {
    window.location.assign(url);
  }
});

二、Firebase权限不足错误 #

原因 #

控制台报错Missing or insufficient permissions，说明addDoc或onSnapshot操作被Firebase安全规则阻止，常见场景：

• 调用createCheckoutSession时用户未完成登录，request.auth为null；
• 修改后的安全规则未发布到Firebase控制台；
• 若使用Stripe Firebase扩展处理会话，扩展的服务账号无checkout_sessions文档的写入权限。

解决方法 #

1. 确保用户已登录：调用函数前验证登录状态，例如在React中：

import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "../firebase/firebaseInit";

// 组件内使用
const [user, loading] = useAuthState(auth);

const handleCheckout = () => {
  if (loading || !user) {
    alert("请先登录");
    return;
  }
  createCheckoutSession(user);
};

2. 验证并调整安全规则：
   • 登录Firebase控制台，确认你提供的安全规则已点击"发布"生效；
   • 若使用Stripe扩展处理会话，需允许服务账号写入文档，修改规则：

match /users/{uid}/checkout_sessions/{id} {
  allow read: if request.auth.uid == uid;
  // 允许用户创建，同时允许Stripe扩展服务账号写入
  allow write: if request.auth.uid == uid || request.auth.token.firebase.sign_in_provider == "service_account";
}

3. 增加UID有效性校验：在函数内确认用户UID有效，避免无效状态引发权限问题：

export async function createCheckoutSession(user: User) {
  if (!user?.uid) {
    alert("用户未登录");
    return;
  }
  // 后续代码...
}

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