如何用纯JavaScript和Fetch API向Firebase Firestore发送POST请求

问题说明 #

我能轻松用Fetch API向Firestore发起GET请求，但POST请求一直无法实现。需要用纯JavaScript编写符合REST API标准的POST请求代码，因为要适配支持Vanilla JS集成的低代码工具AppGyver。

已实现的GET请求代码 #

var project_id = [valor]
var api_key = [valor]
var collection = [valor]

var url_table = `https://firestore.googleapis.com/v1beta1/projects/${project_id}/databases/(default)/documents/${collection}?key=${api_key}`
var response = await fetch(url_table);
var json = await response.json();

参考：Airtable的POST请求示例 #

我之前在Airtable中是这么发起POST请求的，但不知道如何适配到Firestore：

var options = 
{
    method: REQUEST_TYPE,
    headers: {
        "Content-Type": "application/json", 
        "Authorization": API_AUTHORIZATION
    },
    body: JSON.stringify(
        {
            "fields": 
            {
                "NOME": RECORD['nome'],
                "TIPO": RECORD['tipo'],
                "STATUS": "ATIVO"
            }
        }
    )
}

之后将options传入Fetch请求：

var response = await fetch(url_table, options)

Firestore POST 请求实现方案 #

Firestore REST API创建文档有两种方式，对应不同的请求配置：

1. 自动生成文档ID（POST请求） #

• 请求URL与GET请求一致，无需额外路径参数
• 请求体需遵循Firestore格式，用fields定义文档数据，且必须明确指定数据类型（如字符串用stringValue，数字用integerValue等）
• 仅需在URL中携带API Key，无需额外Authorization头

示例代码：

var project_id = [valor]
var api_key = [valor]
var collection = [valor]

var url_table = `https://firestore.googleapis.com/v1beta1/projects/${project_id}/databases/(default)/documents/${collection}?key=${api_key}`

var options = {
    method: 'POST',
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        "fields": {
            "NOME": { "stringValue": RECORD['nome'] },
            "TIPO": { "stringValue": RECORD['tipo'] },
            "STATUS": { "stringValue": "ATIVO" }
        }
    })
}

var response = await fetch(url_table, options);
var json = await response.json();

2. 指定自定义文档ID（PUT请求） #

如果需要手动指定文档ID，需使用PUT请求，并在URL中添加文档ID路径：

var project_id = [valor]
var api_key = [valor]
var collection = [valor]
var docId = "你的自定义文档ID"; // 替换为目标文档ID

var url_table = `https://firestore.googleapis.com/v1beta1/projects/${project_id}/databases/(default)/documents/${collection}/${docId}?key=${api_key}`

var options = {
    method: 'PUT',
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        "fields": {
            "NOME": { "stringValue": RECORD['nome'] },
            "TIPO": { "stringValue": RECORD['tipo'] },
            "STATUS": { "stringValue": "ATIVO" }
        }
    })
}

var response = await fetch(url_table, options);
var json = await response.json();

关键注意点 #

• Firestore要求所有字段必须明确声明数据类型，不能像Airtable那样直接传入原始值，比如数字类型需写为"AGE": { "integerValue": 25 }
• 确保你的API Key拥有Firestore的写入权限（需在Firebase控制台配置数据库规则）
• 若使用布尔值、数组等其他类型，需对应使用booleanValue、arrayValue等Firestore指定的字段格式

内容的提问来源于stack exchange，提问作者Náthalie Lima