Firestore JavaScript v9获取图片Blob报错：toUint8Array不是函数

问题描述 #

参考示例在Firestore中存储和获取图片Blob，但获取时遇到问题：

执行以下代码：

const firebase_blob = doc.get('img');
const uint8_array = firebase_blob.toUint8Array();

出现错误：

firebase_blob.toUint8Array is not a function at UserManager.js:91:59

通过console.log(firebase_blob)得到的结果为：

{
    "_byteString": {
        "binaryString": "ÿØÿà\u0000\u0010JFIF\u0000\u0001\u0001\u0000\u0000\u0001\u0000\u0001\u0000\u0000ÿâ\u0001ØICC_PROFILE\u0000\u0001\u0001\u0000\u0000\u0001È\u0000\u0000\u0000\u0000\u00040\u000(...truncated)"
    }
}

请问错误出在哪里？toUint8Array是否已被其他函数替代？

问题解答 #

错误原因 #

你获取到的不是Firebase Firestore的Blob实例，而是一个序列化后的普通JavaScript对象。这通常是因为存储图片时没有使用Firestore提供的Blob类型进行存储，导致数据被转换成普通对象后存入，获取时自然无法调用Blob实例的toUint8Array方法。

解决方法 #

1. 规范存储流程（推荐）
   存储图片数据时，必须先将图片的Uint8Array转换为Firestore的Blob类型，再存入数据库：

   // 假设你已有图片的Uint8Array数据
   const firestoreBlob = firebase.firestore.Blob.fromUint8Array(yourImageUint8Array);
   // 将Blob存入Firestore
   db.collection('your-collection').doc('target-doc').set({ img: firestoreBlob });
   

   按照这个流程存储后，获取时doc.get('img')会返回真正的Firestore Blob实例，此时调用toUint8Array()即可正常获取图片的Uint8Array数据。

2. 修复已错误存储的数据
   如果数据已经错误存储为普通对象，可以手动从_byteString.binaryString转换为Uint8Array：

   const binaryString = firebase_blob._byteString.binaryString;
   const uint8Array = new Uint8Array(binaryString.length);
   for (let i = 0; i < binaryString.length; i++) {
       uint8Array[i] = binaryString.charCodeAt(i);
   }
   

关于toUint8Array #

该方法并未被替代，它仍然是Firestore Blob实例的标准方法。只有当你获取到的是真正的Firestore Blob对象时，才能正常调用这个方法。

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