为什么Firebase Storage文件实际存在可访问却提示不存在错误？

向Firebase Storage上传文件后出现异常：文件实际真实存在，直接访问链接可正常打开，但程序抛出文件不存在的错误，已确认使用的URL完全正确。

原始上传代码 #

async function uploadFile() {
    console.log('starting UPLOAD ========');
    const blob = await fetch(mediaBlobUrl).then((r) => r.blob());
    var id = crypto.randomBytes(16).toString('hex');
    var url = window.location.href;
    console.log(` the unique id for the url is ----> ${id}`);
    const path = `/recordings/${id}`;
    setCopied(true);
    firebase
      .storage()
      .ref(path)
      .put(blob)
      .then(function (snapshot) {
        console.log('Uploaded complete');
      });

    await storage.ref(path).getDownloadURL().then(setURL);
  }

报错信息 #

GET https://firebasestorage.googleapis.com/v0/b/burcmce.appspot.com/o/recordings%2Fbbf9217d3a36c6 404
XhrConnection.send @ connection.ts:75
doTheRequest @ request.ts:135
(anonymous) @ backoff.ts:63
setTimeout (async)
callWithDelay @ backoff.ts:61
start @ backoff.ts:115
NetworkRequest.start_ @ request.ts:205
(anonymous) @ request.ts:102
NetworkRequest @ request.ts:99
makeRequest @ request.ts:309
StorageService._makeRequest @ service.ts:296
(anonymous) @ service.ts:324
step @ tslib.es6.js:102
(anonymous) @ tslib.es6.js:83
fulfilled @ tslib.es6.js:73
Promise.then (async)
step @ tslib.es6.js:75
(anonymous) @ tslib.es6.js:76
__awaiter @ tslib.es6.js:72
StorageService.makeRequestWithTokens @ service.ts:316
(anonymous) @ reference.ts:368
step @ tslib.es6.js:102
(anonymous) @ tslib.es6.js:83
(anonymous) @ tslib.es6.js:76
__awaiter @ tslib.es6.js:72
getDownloadURL$1 @ reference.ts:361
getDownloadURL @ api.ts:232
ReferenceCompat.getDownloadURL @ reference.ts:219
uploadFile @ ProductScreen.js:461
async function (async)
uploadFile @ ProductScreen.js:447
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
(anonymous) @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22396
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
ProductScreen.js:462 Uncaught (in promise) FirebaseError: Firebase Storage: Object 'recordings/bbf9217d3a3aa999536c6' does not exist. (storage/object-not-found)
{
  "error": {
    "code": 404,
    "message": "Not Found.  Could not get object",
    "status": "GET_OBJECT"
  }
}

问题原因 #

• 原始代码没有等待put上传操作完成就提前执行getDownloadURL，此时文件还未写入Storage，所以返回404，等后续上传完成后手动访问自然可以正常打开
• 存储引用的写法存在上下文不一致问题，避免直接把路径传入ref()

修复方案 #

// 要把getDownloadURL的逻辑放到上传完成的回调中，或者await上传操作完成后再执行
firebase
      .storage()
      .ref()
      .child(path)
      .getDownloadURL()
      .then(function (downloadURL) {
        console.log('File available at', downloadURL);
        setURL(downloadURL);
      });

// 禁止写法：不要在上传未完成时直接调用，也不要加括号执行setURL()
// storage.ref(path).getDownloadURL().then(setURL());

也可以用async/await写法调整执行顺序：

// 先等待上传完成
await firebase.storage().ref(path).put(blob);
// 再获取下载地址
const downloadUrl = await firebase.storage().ref().child(path).getDownloadURL();
setURL(downloadUrl);

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